@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap');


/* ==========================================================================
   typography.css
   ========================================================================== */
/* ==========================================================================
   Typography System — Display, Headline, Title, Body, Label

   Usage: add ONE class to any element to get its complete type style
   (font-size, line-height, letter-spacing where applicable, weight,
   font-family) in one go.

     <h1 class="text-display-2xl-bold">Hello</h1>
     <p class="text-body-md-regular">Paragraph text</p>
     <span class="text-label-sm-medium">A tag</span>

   Naming pattern: text-{family}-{size}-{weight}
     family: display | headline | title | body | label
     size:   varies per family (see variables.css for the exact list)
     weight: regular | medium | semibold | bold
             (headline has no semibold step — regular/medium/bold only)

   All values are pulled from CSS custom properties in variables.css, so
   redesigning the scale means editing tokens in ONE place — every class
   built from a token updates automatically.
   ========================================================================== */

/* Shared resets/behavior for every typography class, regardless of family/size/weight */
[class*="text-"] {
    font-family: var(--font-base);
    margin: 0;
}

/* ============================================================================
   Display scale
   ============================================================================ */

/* Display 2XL — 72px / 90px line-height */
.text-display-2xl-regular,
.text-display-2xl-medium,
.text-display-2xl-semibold,
.text-display-2xl-bold {
    font-size: var(--text-display-2xl-size);
    line-height: var(--text-display-2xl-line-height);
    letter-spacing: var(--text-display-2xl-letter-spacing);
}

.text-display-2xl-regular {
    font-weight: var(--font-weight-normal);
}

.text-display-2xl-medium {
    font-weight: var(--font-weight-medium);
}

.text-display-2xl-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-display-2xl-bold {
    font-weight: var(--font-weight-bold);
}

/* Display XL — 60px / 72px line-height */
.text-display-xl-regular,
.text-display-xl-medium,
.text-display-xl-semibold,
.text-display-xl-bold {
    font-size: var(--text-display-xl-size);
    line-height: var(--text-display-xl-line-height);
    letter-spacing: var(--text-display-xl-letter-spacing);
}

.text-display-xl-regular {
    font-weight: var(--font-weight-normal);
}

.text-display-xl-medium {
    font-weight: var(--font-weight-medium);
}

.text-display-xl-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-display-xl-bold {
    font-weight: var(--font-weight-bold);
}

/* Display Large — 48px / 60px line-height */
.text-display-lg-regular,
.text-display-lg-medium,
.text-display-lg-semibold,
.text-display-lg-bold {
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line-height);
    letter-spacing: var(--text-display-lg-letter-spacing);
}

.text-display-lg-regular {
    font-weight: var(--font-weight-normal);
}

.text-display-lg-medium {
    font-weight: var(--font-weight-medium);
}

.text-display-lg-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-display-lg-bold {
    font-weight: var(--font-weight-bold);
}

/* Display Medium — 36px / 44px line-height */
.text-display-md-regular,
.text-display-md-medium,
.text-display-md-semibold,
.text-display-md-bold {
    font-size: var(--text-display-md-size);
    line-height: var(--text-display-md-line-height);
    letter-spacing: var(--text-display-md-letter-spacing);
}

.text-display-md-regular {
    font-weight: var(--font-weight-normal);
}

.text-display-md-medium {
    font-weight: var(--font-weight-medium);
}

.text-display-md-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-display-md-bold {
    font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Headline scale
   ============================================================================ */

/* Headline Large — 32px / 40px line-height */
.text-headline-lg-regular,
.text-headline-lg-medium,
.text-headline-lg-bold {
    font-size: var(--text-headline-lg-size);
    line-height: var(--text-headline-lg-line-height);
}

.text-headline-lg-regular {
    font-weight: var(--font-weight-normal);
}

.text-headline-lg-medium {
    font-weight: var(--font-weight-medium);
}

.text-headline-lg-bold {
    font-weight: var(--font-weight-bold);
}

/* Headline Medium — 28px / 36px line-height */
.text-headline-md-regular,
.text-headline-md-medium,
.text-headline-md-bold {
    font-size: var(--text-headline-md-size);
    line-height: var(--text-headline-md-line-height);
}

.text-headline-md-regular {
    font-weight: var(--font-weight-normal);
}

.text-headline-md-medium {
    font-weight: var(--font-weight-medium);
}

.text-headline-md-bold {
    font-weight: var(--font-weight-bold);
}

/* Headline Small — 24px / 32px line-height */
.text-headline-sm-regular,
.text-headline-sm-medium,
.text-headline-sm-bold {
    font-size: var(--text-headline-sm-size);
    line-height: var(--text-headline-sm-line-height);
}

.text-headline-sm-regular {
    font-weight: var(--font-weight-normal);
}

.text-headline-sm-medium {
    font-weight: var(--font-weight-medium);
}

.text-headline-sm-bold {
    font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Title scale
   ============================================================================ */

/* Title Large — 20px / 28px line-height */
.text-title-lg-regular,
.text-title-lg-medium,
.text-title-lg-semibold,
.text-title-lg-bold {
    font-size: var(--text-title-lg-size);
    line-height: var(--text-title-lg-line-height);
}

.text-title-lg-regular {
    font-weight: var(--font-weight-normal);
}

.text-title-lg-medium {
    font-weight: var(--font-weight-medium);
}

.text-title-lg-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-title-lg-bold {
    font-weight: var(--font-weight-bold);
}

/* Title Medium — 16px / 24px line-height */
.text-title-md-regular,
.text-title-md-medium,
.text-title-md-semibold,
.text-title-md-bold {
    font-size: var(--text-title-md-size);
    line-height: var(--text-title-md-line-height);
}

.text-title-md-regular {
    font-weight: var(--font-weight-normal);
}

.text-title-md-medium {
    font-weight: var(--font-weight-medium);
}

.text-title-md-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-title-md-bold {
    font-weight: var(--font-weight-bold);
}

/* Title Small — 14px / 20px line-height */
.text-title-sm-regular,
.text-title-sm-medium,
.text-title-sm-semibold,
.text-title-sm-bold {
    font-size: var(--text-title-sm-size);
    line-height: var(--text-title-sm-line-height);
}

.text-title-sm-regular {
    font-weight: var(--font-weight-normal);
}

.text-title-sm-medium {
    font-weight: var(--font-weight-medium);
}

.text-title-sm-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-title-sm-bold {
    font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Body scale
   ============================================================================ */

/* Body XL — 18px / 24px line-height */
.text-body-xl-regular,
.text-body-xl-medium,
.text-body-xl-semibold,
.text-body-xl-bold {
    font-size: var(--text-body-xl-size);
    line-height: var(--text-body-xl-line-height);
}

.text-body-xl-regular {
    font-weight: var(--font-weight-normal);
}

.text-body-xl-medium {
    font-weight: var(--font-weight-medium);
}

.text-body-xl-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-body-xl-bold {
    font-weight: var(--font-weight-bold);
}

/* Body Large — 16px / 24px line-height */
.text-body-lg-regular,
.text-body-lg-medium,
.text-body-lg-semibold,
.text-body-lg-bold {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line-height);
}

.text-body-lg-regular {
    font-weight: var(--font-weight-normal);
}

.text-body-lg-medium {
    font-weight: var(--font-weight-medium);
}

.text-body-lg-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-body-lg-bold {
    font-weight: var(--font-weight-bold);
}

/* Body Medium — 14px / 20px line-height */
.text-body-md-regular,
.text-body-md-medium,
.text-body-md-semibold,
.text-body-md-bold {
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-line-height);
}

.text-body-md-regular {
    font-weight: var(--font-weight-normal);
}

.text-body-md-medium {
    font-weight: var(--font-weight-medium);
}

.text-body-md-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-body-md-bold {
    font-weight: var(--font-weight-bold);
}

/* Body Small — 13px / 16px line-height */
.text-body-sm-regular,
.text-body-sm-medium,
.text-body-sm-semibold,
.text-body-sm-bold {
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line-height);
}

.text-body-sm-regular {
    font-weight: var(--font-weight-normal);
}

.text-body-sm-medium {
    font-weight: var(--font-weight-medium);
}

.text-body-sm-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-body-sm-bold {
    font-weight: var(--font-weight-bold);
}

/* Body XS — 12px / 16px line-height */
.text-body-xs-regular,
.text-body-xs-medium,
.text-body-xs-semibold,
.text-body-xs-bold {
    font-size: var(--text-body-xs-size);
    line-height: var(--text-body-xs-line-height);
}

.text-body-xs-regular {
    font-weight: var(--font-weight-normal);
}

.text-body-xs-medium {
    font-weight: var(--font-weight-medium);
}

.text-body-xs-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-body-xs-bold {
    font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Label scale
   ============================================================================ */

/* Label Large — 14px / 20px line-height */
.text-label-lg-regular,
.text-label-lg-medium,
.text-label-lg-semibold,
.text-label-lg-bold {
    font-size: var(--text-label-lg-size);
    line-height: var(--text-label-lg-line-height);
}

.text-label-lg-regular {
    font-weight: var(--font-weight-normal);
}

.text-label-lg-medium {
    font-weight: var(--font-weight-medium);
}

.text-label-lg-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-label-lg-bold {
    font-weight: var(--font-weight-bold);
}

/* Label Medium — 13px / 16px line-height */
.text-label-md-regular,
.text-label-md-medium,
.text-label-md-semibold,
.text-label-md-bold {
    font-size: var(--text-label-md-size);
    line-height: var(--text-label-md-line-height);
}

.text-label-md-regular {
    font-weight: var(--font-weight-normal);
}

.text-label-md-medium {
    font-weight: var(--font-weight-medium);
}

.text-label-md-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-label-md-bold {
    font-weight: var(--font-weight-bold);
}

/* Label Small — 12px / 16px line-height */
.text-label-sm-regular,
.text-label-sm-medium,
.text-label-sm-semibold,
.text-label-sm-bold {
    font-size: var(--text-label-sm-size);
    line-height: var(--text-label-sm-line-height);
}

.text-label-sm-regular {
    font-weight: var(--font-weight-normal);
}

.text-label-sm-medium {
    font-weight: var(--font-weight-medium);
}

.text-label-sm-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-label-sm-bold {
    font-weight: var(--font-weight-bold);
}

/* Label XS — 11px / 14px line-height */
.text-label-xs-regular,
.text-label-xs-medium,
.text-label-xs-semibold,
.text-label-xs-bold {
    font-size: var(--text-label-xs-size);
    line-height: var(--text-label-xs-line-height);
}

.text-label-xs-regular {
    font-weight: var(--font-weight-normal);
}

.text-label-xs-medium {
    font-weight: var(--font-weight-medium);
}

.text-label-xs-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-label-xs-bold {
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   accordion.css
   Accordion System — PEGMENT Design System
   ========================================================================== */

/* ==========================================================================
   Accordion — PEGMENT Design System

   Component:  <div class="accordion">  (pure CSS + minimal JS)

   Variants:
     .accordion--default      — flat, border-separated items
     .accordion--elevated      — surface-default bg, 24px radius, shadow
     .accordion--no-separator — removes border between items

   Item states:
     .is-open                 — expanded panel visible
     .is-disabled             — non-interactive, muted colours

   Custom indicators:
     .accordion--indicator--double     — double chevron
     .accordion--indicator--circle      — chevron inside circle
     .accordion--indicator--plusminus   — plus/minus morph

   Accessibility:
     - aria-expanded toggled by JS
     - button element used for keyboard focus
     - 200ms ease-out height transition on panel

   Specifications:
     Header height:        52px
     Header padding-x:     12px
     Header padding-y:     16px
     Title:                text-title-sm-medium, color-text-primary
     Icon (optional):      20×20, gap 8px to title
     Indicator:            20×20, color-icon-secondary
     Border:               1px solid color-border-medium
     Elevated bg:          color-surface-default
     Elevated shadow:      0px 1px 2px 0px #0000000D
     Expanded content:     py 8px, px 20px, text-body-md-regular, color-text-secondary
     Disabled:             color-text-disabled
     Container radius:     24px
     Animation:            200ms ease-out height transition
   ========================================================================== */

/* ── Container ──────────────────────────────────────────────────────────── */
.accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* margin: 0 auto; */
    @media screen and (max-width: 640px) {
       max-width: 90vw;
       margin: 0 auto;
    }
}

/* ── Item ─────────────────────────────────────────────────────────────── */
.accordion--item {
    border-bottom: 1px solid #2E2E2E;
    background: transparent;
    padding: 16px 12px;
    cursor: pointer !important;
}

.accordion--item:last-child {
    border-bottom: none;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.accordion--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    background: transparent;
    border: none;
    text-align: left;
    transition: background-color 0.15s ease;
    position: relative;
}

.accordion--item:not(.is-open):hover {
    background: #2E2E2E;
}

/* Disabled header */
.accordion--item.is-disabled .accordion--header,
.accordion.is-disabled .accordion--header {
    cursor: not-allowed;
    background: transparent;
}

.accordion--item.is-disabled .accordion--header:hover,
.accordion.is-disabled .accordion--header:hover {
    background: transparent;
}

/* ── Title wrap (icon + text) ──────────────────────────────────────────── */
.accordion--title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;

}

/* ── Optional lead icon ────────────────────────────────────────────────── */
.accordion--icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.accordion--icon svg {
    width: 100%;
    height: 100%;
}

/* ── Title ─────────────────────────────────────────────────────────────── */
.accordion--title {
    font-size: var(--text-title-sm-size);
    /* 14px */
    line-height: var(--text-title-sm-line-height);
    /* 20px */
    font-weight: var(--font-weight-medium);
    /* 500 */
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;

    
}

/* ── Indicator (chevron / custom) ────────────────────────────────────── */
.accordion--indicator {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #B0B0B0;
    transition: transform 0.2s ease-out;
}

.accordion--indicator svg {
    width: 100%;
    height: 100%;
}

/* Rotate chevron when expanded */
.accordion--item.is-open .accordion--indicator {
    transform: rotate(180deg);
}


/* ═══════════════════════════════════════════════════════════════════════
   CUSTOM INDICATORS
   ═══════════════════════════════════════════════════════════════════════ */

/* Double chevron — second chevron fades in on open */
.accordion--indicator--double svg {
    transition: opacity 0.2s ease, transform 0.2s ease-out;
}

.accordion--indicator--double svg:nth-child(2) {
    opacity: 0.4;
}

.accordion--item.is-open .accordion--indicator--double svg:nth-child(2) {
    opacity: 1;
}

/* Circle chevron — no extra rotation, just the arrow flips */
.accordion--indicator--circle {
    border-radius: 9999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL (expandable content) — FIXED: no peek-through when collapsed
   ═══════════════════════════════════════════════════════════════════════ */

.accordion--panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease-out;
}

/* Panel padding: 40px when icon present, 20px when no icon */
.accordion--item:has(.accordion--icon).is-open .accordion--panel {
    grid-template-rows: 1fr;
    padding: 8px 29px 0px 25px;
}

.accordion--item:not(:has(.accordion--icon)).is-open .accordion--panel {
    grid-template-rows: 1fr;
    padding: 8px 20px 0px 0px;
}

/* The inner wrapper must have overflow:hidden so that when
   grid-template-rows is 0fr, the wrapper fully collapses to 0. */
.accordion--panel>.accordion--content {
    overflow: hidden;
    min-height: 0;
}


/* Reset any padding that was on content */
.accordion--content {
    padding: 0;
    /* or remove this rule entirely */
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-line-height);
    font-weight: var(--font-weight-normal);
    color: #B0B0B0;
}