/* Latuvo design tokens — the web port of `Shared/Design/Theme.swift`.
   Theme.swift is CANONICAL: if a value changes there, change it here too.
   Dark-only ("Deep Court" System 24 direction B), same palette the iOS app
   forces via `.preferredColorScheme(.dark)`. Every site stylesheet reads
   these custom properties instead of hardcoding hex, so the marketing site
   and the app can't drift apart. */

:root {
    /* Surfaces — Deep Court ladder (Theme.Color.bg → surface3). */
    --deep-court: #0E1B2C;   /* bg */
    --surface:    #142535;
    --surface2:   #1B2E40;
    --surface3:   #24394D;
    --surface-overlay: rgba(255, 255, 255, 0.04);

    /* Text — Bone, opacity steps tuned for WCAG AA on Deep Court.
       --bone-ter-text is the AA-safe variant for tertiary *body* copy
       (mirrors Theme's textTerText: bone@0.52 ≈ 4.8:1). */
    --bone:          #EDECE6;
    --bone-sec:      rgba(237, 236, 230, 0.62);
    --bone-ter:      rgba(237, 236, 230, 0.38);
    --bone-ter-text: rgba(237, 236, 230, 0.52);
    --bone-quat:     rgba(237, 236, 230, 0.22);

    /* Brand — Felt (tennis-ball yellow-green). */
    --felt:      #C9D54A;
    --felt-dim:  #8FA02A;
    --felt-glow: rgba(201, 213, 74, 0.18);
    --felt-text: #0E1B2C;   /* glyphs sitting on felt */

    /* Felt radial gradient — the wordmark ball + CTA sheen.
       Stops mirror the inline SVG radialGradient in the wordmark. */
    --felt-grad-hi:  #EAF27A;
    --felt-grad-mid: #C9D54A;
    --felt-grad-lo:  #8FA02A;

    /* Semantic. --loss-text is the AA-safe text variant (Theme lossText). */
    --win:       #7BD86A;
    --loss:      #E84855;
    --loss-text: #FF6B7A;
    --warn:      #F5A623;
    --info:      #6FA8FF;

    /* Hairlines — tinted off Bone (warm), not pure white. */
    --hairline:  rgba(237, 236, 230, 0.08);
    --hairline2: rgba(237, 236, 230, 0.14);

    /* Tier ladder (EOL badge dot + history bands). Advanced collapses
       onto Felt, per Theme.Color.tierAdvanced. */
    --tier-beginner:     #5C6573;
    --tier-novice:       #9DA7B3;
    --tier-recreational: #A77B4B;
    --tier-solid-club:   #4FA8E0;
    --tier-strong-club:  #2EB67D;
    --tier-advanced:     #C9D54A;
    --tier-tournament:   #D4541E;
    --tier-elite:        #7B5FE0;

    /* Court-surface hues (head-to-head surface breakdown). */
    --surface-hard:  #2A6FB0;
    --surface-clay:  #C2643E;
    --surface-grass: #4A8A3E;

    /* Spacing — 4pt grid (Theme.Spacing). */
    --s0_5: 2px;
    --s1:  4px;
    --s1_5: 6px;
    --s2:  8px;
    --s2_5: 10px;
    --s3:  12px;
    --s3_5: 14px;
    --s4:  16px;
    --s4_5: 18px;
    --s5:  20px;
    --s6:  24px;
    --s7:  32px;
    --s8:  40px;
    --s9:  48px;
    --s10: 64px;
    --s11: 80px;

    /* Radii — continuous corners (Theme.Radius). */
    --r-segment: 8px;
    --r-button:  12px;
    --r-tile:    14px;
    --r-card:    16px;
    --r-big-tile: 20px;
    --r-sheet:   24px;
    --r-chip:    999px;

    /* Sizes (Theme.Size). */
    --tap: 44px;            /* min interactive target (HIG) */
    --btn-primary: 52px;    /* filled brand CTA height */

    /* ── Layout / type scale ────────────────────────────────────────────
       Adopted from the Claude Design handoff (its layout rhythm), mapped
       onto the Latuvo palette: the handoff's `--lime` accent resolves to
       our flat `--felt`, `--court-2`/`--court-line` to our surface/hairline,
       and `--slate` from Theme.Color.slate. Type ramps + tracking + motion
       come straight from the handoff so placement matches. */
    --slate:      #8C9099;                 /* Theme.Color.slate — muted secondary */
    --court-2:    var(--surface);          /* raised surface */
    --court-line: var(--hairline2);        /* hairline divider on Deep Court */

    --t-hero:    clamp(52px, 8.5vw, 116px);
    --t-display: clamp(36px, 5.5vw, 68px);
    --t-h1:      clamp(34px, 4.4vw, 60px);
    --t-h2:      clamp(26px, 2.4vw, 36px);

    --tr-wordmark: -0.025em;
    --tr-display:  -0.022em;
    --tr-tight:    -0.015em;
    --tr-eyebrow:   0.14em;

    --max:    1180px;
    --gutter: clamp(20px, 4vw, 48px);

    --ease:  cubic-bezier(0.2, 0.7, 0.3, 1);
    --t-fast: 140ms;
    --t-std:  220ms;
}