@layer tokens, base, layout, chrome, components, motion, utilities;

@layer tokens {
  :root {
    /* ---------- Colour: primitives ---------- */
    --c-ink-900: #101215;   /* headlines, primary text, primary fills */
    --c-ink-700: #262B32;   /* hover fills, dark panels */
    --c-ink-500: #4A5058;
    --c-steel-500: #6A727C; /* secondary body copy */
    --c-steel-300: #A6ADB6; /* placeholder, disabled label */
    --c-line: #E2E3DF;      /* hairlines on paper */
    --c-line-strong: #C9CBC5;
    --c-paper: #F5F5F1;     /* page background */
    --c-paper-sunk: #EDEDE7;/* render backdrops, inset media */
    --c-surface: #FFFFFF;   /* cards, popovers, inputs */
    --c-accent: #C9F24D;    /* acid lime */
    --c-accent-deep: #B2DC2F;
    --c-accent-tint: #F0FAD3;
    --c-danger: #C0392B;
    --c-success: #1F7A4D;

    /* ---------- Colour: semantic ---------- */
    --color-bg: var(--c-paper);
    --color-surface: var(--c-surface);
    --color-surface-sunk: var(--c-paper-sunk);
    --color-text: var(--c-ink-900);
    --color-text-muted: var(--c-steel-500);
    --color-text-inverse: var(--c-paper);
    --color-border: var(--c-line);
    --color-border-hover: var(--c-ink-900);
    --color-accent: var(--c-accent);
    --color-on-accent: var(--c-ink-900);   /* lime is a background, never text on white */
    --color-scrim: rgb(16 18 21 / 0.55);

    /* ---------- Typography ---------- */
    --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-display: clamp(2.5rem, 5.6vw, 5rem);      /* 40 → 80 */
    --fs-h1:      clamp(2.125rem, 4.2vw, 3.5rem);  /* 34 → 56 */
    --fs-h2:      clamp(1.75rem, 2.8vw, 2.5rem);   /* 28 → 40 */
    --fs-h3:      clamp(1.375rem, 1.7vw, 1.625rem);/* 22 → 26 */
    --fs-h4:      1.25rem;                         /* 20 */
    --fs-lead:    clamp(1.0625rem, 1.15vw, 1.1875rem); /* 17 → 19 */
    --fs-body:    1rem;                            /* 16 */
    --fs-sm:      0.875rem;                        /* 14 */
    --fs-xs:      0.75rem;                         /* 12 */
    --fs-chip:    0.6875rem;                       /* 11 */

    --lh-display: 0.98;
    --lh-heading: 1.08;
    --lh-snug:    1.35;
    --lh-body:    1.6;
    --lh-relaxed: 1.7;

    --tracking-display: -0.02em;
    --tracking-heading: -0.01em;
    --tracking-chip: 0.12em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---------- Spacing (4px base) ---------- */
    --sp-1: 0.25rem;  /* 4  */
    --sp-2: 0.5rem;   /* 8  */
    --sp-3: 0.75rem;  /* 12 */
    --sp-4: 1rem;     /* 16 */
    --sp-5: 1.25rem;  /* 20 */
    --sp-6: 1.5rem;   /* 24 */
    --sp-8: 2rem;     /* 32 */
    --sp-10: 2.5rem;  /* 40 */
    --sp-14: 3.5rem;  /* 56 */
    --sp-18: 4.5rem;  /* 72 */
    --sp-24: 6rem;    /* 96 */
    --sp-32: 8rem;    /* 128 */
    --sp-40: 10rem;   /* 160 */

    --section-y: clamp(4.5rem, 8vw, 8rem);   /* 72 → 128 vertical section padding */
    --section-gap-inner: clamp(2rem, 3.2vw, 3.5rem); /* eyebrow → content */
    --stack-gap: var(--sp-3);                /* gap inside card stacks */
    --grid-gap: clamp(1rem, 2.2vw, 2rem);    /* 16 → 32 */

    /* ---------- Containers & grid ---------- */
    --container-max: 77.5rem;   /* 1240 */
    --container-wide: 90rem;    /* 1440, full-bleed sections */
    --reading-max: 45rem;       /* 720, legal + project body */
    --form-col: 32.5rem;        /* 520, lead form column */
    --gutter: var(--sp-5);      /* 20 mobile → overridden per breakpoint */
    --header-h: 4rem;           /* 64 */
    --grid-cols: 12;

    /* ---------- Radii ---------- */
    --r-xs: 4px;    /* chips-on-media, small toggles */
    --r-sm: 8px;    /* media, buttons, inputs, icon buttons */
    --r-md: 12px;   /* cards */
    --r-lg: 20px;   /* dark CTA panel, modals, bento panels */
    --r-pill: 999px;/* eyebrow chips, category filters, tags */

    /* ---------- Borders & shadows ---------- */
    --bw-hairline: 1px;
    --bw-strong: 2px;
    --shadow-1: 0 1px 2px rgb(16 18 21 / 0.05);
    --shadow-2: 0 10px 24px -14px rgb(16 18 21 / 0.22);
    --shadow-3: 0 28px 64px -28px rgb(16 18 21 / 0.32); /* modals only */
    --focus-ring: 0 0 0 3px rgb(201 242 77 / 0.75);
    --focus-offset: 2px;

    /* ---------- Motion ---------- */
    --dur-1: 120ms;  /* colour/opacity micro-feedback */
    --dur-2: 180ms;  /* hover on buttons, links, chips */
    --dur-3: 280ms;  /* card hover, accordion, menu items */
    --dur-4: 480ms;  /* scroll reveal, content swap */
    --dur-5: 700ms;  /* hero media, slider crossfade tail */
    --stagger: 70ms;
    --i: 0; /* per-sibling stagger index; HTML overrides */

    --ease-standard: cubic-bezier(0.2, 0.6, 0.35, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-emphasis: cubic-bezier(0.66, 0, 0.06, 1);

    /* ---------- Z layers ---------- */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-widget: 300;
    --z-modal: 400;
  }

  @media (min-width: 48rem)  { :root { --gutter: var(--sp-8); } }   /* 768 → 32 */
  @media (min-width: 64rem)  { :root { --gutter: var(--sp-10); --header-h: 4.5rem; } } /* 1024 → 40 */
  @media (min-width: 90rem)  { :root { --gutter: var(--sp-14); } }  /* 1440 → 56 */

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --stagger: 0ms; }
  }
}