/**
 * BricksDeal Design Tokens
 * ─────────────────────────
 *
 * Scope:    public site (apps/web). Loaded BEFORE site-inline.css so
 *           consuming files inherit token values via var(--…).
 *
 * Spacing:  4px scale. Token name reflects step count.
 *           --s-4 = 4 × 4px = 16px. Saves doing arithmetic per call site.
 *
 * Type:     √φ (1.272) modular scale anchored at 16px body. Every two
 *           steps lands on a golden-ratio multiple (16 → 26 → 42 → 68).
 *           This is the rhythm that drives heading hierarchy.
 *
 * Color:    role-based ("ink", "paper", "yellow", "rose") plus
 *           opacity-graded variants. Avoid raw hex outside this file.
 *
 * Radius:   one ladder, plus a "square" token for LEGO-brick callouts.
 * Shadow:   four elevations + one focus-ring style.
 *
 * To add a token: prefer extending an existing scale. Avoid one-off
 * variables for site-specific needs — put those in the consuming file.
 */

:root {
    /* ────────────────────────────────────────────────────────────── */
    /* Spacing — 4px scale                                            */
    /* ────────────────────────────────────────────────────────────── */
    /* Off-grid → on-grid migration map. When converting a raw px     */
    /* value, pick the token whose pixel value is the nearest         */
    /* multiple of 4 — round to the closer of the two when between.   */
    /*   6  → --s-2  (8)                                              */
    /*   10 → --s-2  (8)   or --s-3 (12) for inline padding           */
    /*   11 → --s-3  (12)                                             */
    /*   13 → --s-3  (12)                                             */
    /*   14 → --s-3  (12)  or --s-4 (16) for vertical rhythm          */
    /*   15 → --s-4  (16)                                             */
    /*   18 → --s-4  (16)  or --s-5 (20) for section gaps             */
    /*   22 → --s-5  (20)  or --s-6 (24)                              */
    /*   26 → --s-6  (24)  or --s-7 (28)                              */
    /*   30 → --s-7  (28)  or --s-8 (32)                              */
    /*   34 → --s-8  (32)                                             */
    /*   36 → --s-8  (32)  or --s-10 (40) for hero spacing            */
    /*   38 → --s-10 (40)                                             */
    /*   44 → --s-12 (48)                                             */
    /*   52 → --s-14 (56) or keep as --s-12 (48) for tighter blocks   */
    /*   54 → --s-14 (56)                                             */
    /* Keep 1px borders (--s-px). 0 is --s-0. Anything ≤ 4px other    */
    /* than borders is suspect — bump up to --s-1.                    */
    --s-px: 1px;
    --s-0: 0;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 28px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-14: 56px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;
    --s-40: 160px;

    /* ────────────────────────────────────────────────────────────── */
    /* Type scale — √φ ≈ 1.272                                        */
    /* Every two steps lands on a φ-multiple of body (16, 26, 42, 68) */
    /* ────────────────────────────────────────────────────────────── */
    --fs-eyebrow: 11px; /* Geist Mono UPPERCASE — never resize */
    --fs-3xs: 8px; /* badge/superscript */
    --fs-2xs: 10px; /* micro */
    --fs-xs: 13px; /* caption, small body */
    --fs-sm: 16px; /* body default */
    --fs-md: 20px; /* lede, large body */
    --fs-lg: 26px; /* h3, sub-section heading */
    --fs-xl: 33px; /* h2, section heading */
    --fs-2xl: 42px; /* h1, page title */
    --fs-3xl: 53px; /* hero display */
    --fs-4xl: 68px; /* price hero, focal point */

    /* Body sizes — off-rhythm but heavily used in practice. These fill the
       gaps between the √φ steps for paragraph copy, lede text, and form
       UI that wants a touch more breathing room than --fs-xs/sm/md give.
       Migrated from the legacy --text-sm/md/lg namespace. */
    --fs-body-sm: 14px; /* secondary body, captions in dense UI */
    --fs-body-md: 18px; /* emphasized body, lede sub-heading */
    --fs-body-lg: 22px; /* large body, small heading */

    /* Line heights — tighter as size grows                          */
    --lh-tight: 1.1; /* hero, display */
    --lh-snug: 1.15; /* h1, h2 */
    --lh-base: 1.3; /* h3, h4, lede */
    --lh-relaxed: 1.5; /* body */
    --lh-loose: 1.6; /* long-form prose */

    /* Letter spacing — display tightens, eyebrows open               */
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-base: 0;
    --tracking-wide: 0.04em;
    --tracking-eyebrow: 0.08em;

    /* Font weights                                                   */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Font families.
       The hashed family names (e.g. "Geist-ac3aa079935b9996") are what the
       runtime @font-face declarations in fonts-fallback.css actually
       expose; without them the cascade falls through to system fonts.
       The unhashed names are belt-and-suspenders in case the @font-face
       hash changes (build-time): a browser that finds neither hashed nor
       plain "Geist" then falls to ui-sans-serif / system. */
    --font-sans:
        "Geist-ac3aa079935b9996", "Geist", ui-sans-serif, system-ui,
        -apple-system, sans-serif;
    --font-mono:
        "Geist Mono-c2b9f2d5c382c335", "Geist Mono", ui-monospace,
        SFMono-Regular, Menlo, Monaco, monospace;
    --font-serif:
        "Instrument Serif-26d8d1932f7d3340", "Instrument Serif", ui-serif,
        Georgia, "Times New Roman", serif;

    /* ────────────────────────────────────────────────────────────── */
    /* Color — role-based                                             */
    /* ────────────────────────────────────────────────────────────── */
    /* Paper (cream backgrounds, lightest first) */
    --color-paper: #f2ecdc;
    --color-paper-2: #eae3d1;
    --color-paper-3: #d9d2c2;
    --color-paper-4: #c9c1ae;
    --color-paper-white: #ffffff;

    /* Ink (forest green, dark to mid) */
    --color-ink: #0e2a22;
    --color-ink-2: #143a30;
    --color-ink-3: #2a4138;
    --color-ink-muted: #647770;
    --color-ink-faint: #879a91;
    /* Mid line for borders on dark ink surfaces. Distinct from the ink
       greens above (ΔE ≈ 7 vs ink-3) and already used as fallback in app.css. */
    --color-line-ink: #27584a;

    /* Down — price-decrease (good for buyer) brand green. The codebase
       convention is `--color-up` = price went up (red, bad) and
       `--color-down` = price went down (green, good). `--color-down` itself
       is defined in legacy public/css/site-inline.css; this soft variant
       is the only addition needed for the color tokenization pipeline. */
    --color-down-soft: rgba(10, 143, 93, 0.18);

    /* Sage / mint (light green accents) */
    --color-sage: #9fbcb0;
    --color-sage-light: #c9d9d3;
    --color-mint: #9be5b9;
    --color-acid: #c8f547;

    /* LEGO yellow — primary brand action */
    --color-yellow: #f3c13a;
    --color-yellow-hover: #ffd14a;
    --color-yellow-soft: rgba(243, 193, 58, 0.15);

    /* Rose / deal red */
    --color-rose: #c44131;
    --color-rose-2: #d6442c;
    --color-rose-soft: rgba(196, 65, 49, 0.1);

    /* Lines, borders, scrims (use ink-alpha at consistent steps) */
    --color-line-faint: rgba(14, 42, 34, 0.08);
    --color-line: rgba(14, 42, 34, 0.14);
    --color-line-strong: rgba(14, 42, 34, 0.25);
    --color-scrim: rgba(14, 42, 34, 0.35);
    --color-overlay: rgba(14, 42, 34, 0.6);

    /* Surface alphas on dark backgrounds (use white-alpha) */
    --color-surface-soft: rgba(255, 255, 255, 0.05);
    --color-surface: rgba(255, 255, 255, 0.08);
    --color-surface-strong: rgba(255, 255, 255, 0.14);

    /* Semantic aliases — use these in components by default */
    --color-bg: var(--color-paper);
    --color-text: var(--color-ink);
    --color-text-muted: var(--color-ink-muted);
    --color-text-faint: var(--color-ink-faint);
    --color-accent: var(--color-yellow);
    --color-deal: var(--color-rose);

    /* ────────────────────────────────────────────────────────────── */
    /* Radius                                                         */
    /* ────────────────────────────────────────────────────────────── */
    --radius-square: 0; /* LEGO-brick callout, no rounding */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    /* ────────────────────────────────────────────────────────────── */
    /* Shadow                                                         */
    /* ────────────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 0 rgba(14, 42, 34, 0.04);
    --shadow-sm: 0 2px 6px -2px rgba(14, 42, 34, 0.1);
    --shadow-md: 0 10px 30px -12px rgba(14, 42, 34, 0.25);
    --shadow-lg: 0 16px 40px -16px rgba(14, 42, 34, 0.35);
    --shadow-xl: 0 24px 64px -24px rgba(14, 42, 34, 0.45);
    --shadow-ring: 0 0 0 3px rgba(243, 193, 58, 0.35);

    /* ────────────────────────────────────────────────────────────── */
    /* Z-index                                                        */
    /* ────────────────────────────────────────────────────────────── */
    --z-base: 0;
    --z-raised: 1;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 10000;

    /* ────────────────────────────────────────────────────────────── */
    /* Motion                                                         */
    /* ────────────────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 400ms;

    /* ────────────────────────────────────────────────────────────── */
    /* Layout                                                         */
    /* ────────────────────────────────────────────────────────────── */
    --container-narrow: 720px;
    --container: 1080px;
    --container-wide: 1280px;
    --container-full: 1440px;

    /* ────────────────────────────────────────────────────────────── */
    /* Element scales (computed compositions for common atoms)        */
    /* ────────────────────────────────────────────────────────────── */

    /* Body type */
    --type-body-family: var(--font-sans);
    --type-body-size: var(--fs-sm);
    --type-body-weight: var(--fw-regular);
    --type-body-line: var(--lh-relaxed);
    --type-body-tracking: var(--tracking-base);
    --type-body-color: var(--color-text);

    /* Eyebrow (Geist Mono UPPERCASE small caps) */
    --type-eyebrow-family: var(--font-mono);
    --type-eyebrow-size: var(--fs-eyebrow);
    --type-eyebrow-weight: var(--fw-medium);
    --type-eyebrow-line: 1;
    --type-eyebrow-tracking: var(--tracking-eyebrow);
    --type-eyebrow-transform: uppercase;

    /* Display (price hero) — only place serif lives */
    --type-display-family: var(--font-serif);
    --type-display-size: var(--fs-4xl);
    --type-display-weight: var(--fw-regular);
    --type-display-style: italic;
    --type-display-line: var(--lh-tight);
}

/* ────────────────────────────────────────────────────────────────── */
/* Helper utility classes                                             */
/* Use these instead of repeating var() chains.                       */
/* ────────────────────────────────────────────────────────────────── */

.t-eyebrow {
    font-family: var(--type-eyebrow-family);
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    line-height: var(--type-eyebrow-line);
    letter-spacing: var(--type-eyebrow-tracking);
    text-transform: var(--type-eyebrow-transform);
    color: var(--color-text-muted);
}

.t-body {
    font-family: var(--type-body-family);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line);
    color: var(--type-body-color);
}

/* Visually-hidden but reachable to AT */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}