/* ============================================================
   TOKENS · TIER 1 — PRIMITIVES  (FROZEN)
   ------------------------------------------------------------
   The structural scales: spacing, type, radii, shadow shape,
   line-heights, weights, containers. These are the SAME on every
   project — a client NEVER overrides them. They give the whole
   system its rhythm and proportion.

   What a project DOES override lives in tokens-semantic.css
   (colours, fonts, shape personality dials).

   This file is loaded FIRST, so the @layer declaration below
   fixes the cascade order for the whole system regardless of the
   order the rest of the files happen to load in.
   ============================================================ */

/* Canonical layer order — declared once, here. foundation < block < settings:
   a block's own CSS (@layer ds.block) can never beat the universal block-
   settings utilities (@layer ds.settings), and a project's unlayered tokens.css
   beats everything. This survives any Requirements / @import load order. */
@layer ds.foundation, ds.block, ds.settings;

:root {
    /* ---- Type scale (clamp = fluid between mobile and desktop) ---- */
    --text-hero:  clamp(2.75rem, 2rem + 3.4vw, 4.75rem);
    --text-h1:    clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
    --text-h2:    clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    --text-h3:    clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --text-h4:    1.25rem;
    --text-h5:    1.0625rem;
    --text-h6:    0.9375rem;
    --text-lead:  1.25rem;
    --text-body:  1rem;
    --text-small: 0.875rem;
    --text-xs:    0.75rem;
    --text-eyebrow: 0.75rem;

    --line-height-tight: 1.12;
    --line-height-base:  1.6;

    /* ---- Letter-spacing (tracking) ---- */
    --tracking-tight:  -0.02em;   /* large display headings */
    --tracking-normal: 0;
    --tracking-wide:   0.08em;    /* eyebrows / small caps */

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-bold:    700;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --gap:    var(--space-5);
    --gap-lg: var(--space-7);

    /* ---- Section rhythm (vertical block padding) ---- */
    --space-section:          clamp(3.5rem, 2.5rem + 5vw, 7rem);
    --space-section-compact:  clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --space-section-spacious: clamp(5rem, 3.5rem + 8vw, 11rem);

    /* ---- Radii (shape SHAPE; the personality dial --radius-ui is semantic) ---- */
    --radius-sm:   0.375rem;
    --radius-md:   0.625rem;
    --radius-lg:   1.125rem;
    --radius-pill: 999px;

    /* ---- Shadow shape ----
       The composite is frozen; the TINT (--shadow-color, rgb channels) is a
       semantic token so a brand can colour its shadows. Defaults to neutral ink. */
    --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 2px 6px rgb(var(--shadow-color) / 0.04);
    --shadow-md: 0 6px 22px rgb(var(--shadow-color) / 0.08), 0 1px 3px rgb(var(--shadow-color) / 0.05);
    --shadow-lg: 0 22px 56px rgb(var(--shadow-color) / 0.12), 0 4px 12px rgb(var(--shadow-color) / 0.06);

    /* ---- Layout ---- */
    --container:         75rem;   /* 1200px */
    --container-narrow:  48rem;   /* 768px  */
    --container-padding: clamp(1rem, 4vw, 2.5rem);
    --grid-columns: 12;

    /* ---- Motion (guard with prefers-reduced-motion at the block) ---- */
    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;

    /* ---- Z-index scale (the only layering values blocks should use) ---- */
    --z-base:    0;
    --z-sticky:  100;   /* sticky header */
    --z-overlay: 200;   /* dropdowns, drawers */
    --z-modal:   300;   /* dialogs, popups */

    /* ---- Breakpoints ----
       Custom properties can't be used in @media queries, so these are the
       canonical literal values — blocks must use them verbatim:
         md  = 48rem  (768px)   tablet : stack → 2-up
         lg  = 64rem  (1024px)  desktop: full layout
       Kept here only as documentation; the literals live in the @media rules. */
}