@layer reset, tokens, base, layout, components, shapes, pages, utilities;

/* Design tokens for the Warm Bauhaus system (REDESIGN-PLAN.md §4).
   The only file allowed raw colours and raw font sizes. Components read the
   semantic layer (--fg, --ground, …), never the palette directly. */

@layer tokens {
  :root {
    /* Palette (§4.1) */
    --c-bone: #f1f0f5;
    --c-paper: #fbfafd;
    --c-ink: #1e1b3a;
    --c-ink-2: #514b6b;
    --c-cobalt: #2f45b5;
    --c-cobalt-soft: #cdd4f6;
    --c-saffron: #f0b429;
    --c-blush: #f1bccb;
    --c-white: #ffffff;   /* only behind screenshots, whose own pages are white (C60) */

    /* Families. Each stack ends in a metric-matched local fallback (fonts.css). */
    --font-display: "Bricolage Grotesque", "Bricolage Display Fallback", system-ui, sans-serif;
    --font-heading: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
    --font-text: "Hanken Grotesk", "Hanken Fallback", system-ui, sans-serif;

    /* Type ramp (§4.2). Fluid from 390 to 1440 wide; rem + vw so browser zoom scales it. */
    --t-display: clamp(3.8125rem, 1.7rem + 8.6667vw, 9.5rem);        /* 61 → 152 */
    --t-title: clamp(2.625rem, 1.3714rem + 5.1429vw, 6rem);          /* 42 → 96 */
    --t-title-long: clamp(2.25rem, 1.3214rem + 3.8095vw, 4.75rem);   /* 36 → 76 */
    --t-section: clamp(2rem, 1.2571rem + 3.0476vw, 4rem);            /* 32 → 64 */
    --t-component: clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem);      /* 24 → 40 */
    --t-lede: clamp(1.25rem, 1.1107rem + 0.5714vw, 1.625rem);        /* 20 → 26 */
    --t-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);      /* 17 → 18 */
    --t-small: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);         /* 15 → 16 */
    --t-label: 0.875rem;                                             /* 14 at every width (gate A) */

    --lh-display: 0.92;  --tr-display: -0.035em;  --w-display: 700;
    --lh-title: 1;       --tr-title: -0.03em;     --w-title: 650;
    --lh-section: 1.05;  --tr-section: -0.025em;  --w-section: 600;
    --lh-component: 1.1; --tr-component: -0.02em; --w-component: 600;
    --lh-lede: 1.4;      --tr-lede: -0.005em;     --w-lede: 400;
    --lh-body: 1.5;      --tr-body: 0em;          --w-body: 400;
    --lh-small: 1.5;     --tr-small: 0em;         --w-small: 500;
    --lh-label: 1.3;     --tr-label: 0.08em;      --w-label: 600;
    --stretch-narrow: 88%;
    --measure: 54ch;   /* measured: median 66, 90% of full lines at most 72 characters (§4.2: 60–72) */

    /* Spacing scale (§4.4) */
    --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;  --s4: 1rem;   --s5: 1.5rem;  --s6: 2rem;
    --s7: 3rem;     --s8: 4rem;    --s9: 6rem;     --s10: 9rem;  --s11: 12rem;

    /* Rhythm (§4.4): mobile values; desktop below */
    --space-section: var(--s9);         /* 96 */
    --space-component: var(--s8);       /* 64 */
    --space-before-h2: var(--s7);       /* 48 */
    --space-before-h3: var(--s6);       /* 32 */
    --space-after-heading: var(--s4);   /* 16 */
    --space-stack: var(--s4);           /* 16 */

    /* Grid (§4.4) */
    --cols: 4;
    --margin: clamp(20px, 4.5vw, 72px);
    --gutter: clamp(14px, 1.8vw, 28px);
    --content-max: 1440px;

    /* Frames (§4.5) */
    --arch-h: 64px;
    --field-pad-top: calc(var(--arch-h) + var(--s8));
    --r-soft: 24px;
    --r-arch-foot: 28px;
    --r-pill: 999px;
    --ring: 1.5px;

    /* Chrome. --header-h is the part of the header that stays on screen, so the scroll
       padding in base.css matches it. Below 761px the name sits in its own row above the
       nav and scrolls away (components.css). */
    --header-h-s: 56px;
    --header-h-l: 64px;
    --header-h: var(--header-h-s);
    --header-row: 48px;
    --icon: 20px;
    --focus-width: 2px;
    --focus-offset: 3px;
    --underline: 1px;
    --underline-hover: 2px;
    --underline-offset: 0.2em;
    --target: 44px;
    --target-min: 24px;   /* WCAG 2.5.8 floor for small inline links (§15) */

    /* Motion (§4.6). The GSAP names are the nearest built-in eases, read by main.js. */
    --d-fast: 160ms;
    --d-base: 320ms;
    --d-out: 200ms;
    --d-slow: 640ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);   /* leaving only: the go-link arrow's exit */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --gsap-ease-out: power4.out;      /* 1.1% from the CSS curve; power3.out is 8.4% off */
    --gsap-ease-in-out: power2.inOut; /* 1.0% from the CSS curve */
  }

  @media (width >= 761px) {
    :root {
      --cols: 12;
      --lh-body: 1.6;                     /* 1.5 below 761px, where lines hold 32–47 characters (gate A) */
      --space-section: var(--s10);        /* 144 */
      --space-component: var(--s9);       /* 96 */
      --space-before-h2: var(--s8);       /* 64 */
      --space-before-h3: var(--s7);       /* 48 */
      --space-after-heading: var(--s5);   /* 24 */
      --arch-h: 220px;
      --field-pad-top: calc(var(--arch-h) * 0.5 + var(--s8));   /* the arch's curve, not its full height (owner, 2026-11-04) */
      --r-soft: 32px;
      --header-h: var(--header-h-l);
    }
  }

  /* Semantic layer (§4.1). :root is the bone field; each field class re-points the roles,
     so a component placed on any field looks right without overrides. */
  :root,
  .f-bone {
    --ground: var(--c-bone);
    --surface: var(--c-paper);
    --screen-ground: var(--c-white);   /* the stage behind a screenshot, on every field (C60) */
    --fg: var(--c-ink);
    --fg-muted: var(--c-ink-2);
    --accent: var(--c-cobalt);
    --link: var(--c-cobalt);
    --line: color-mix(in srgb, var(--c-ink) 35%, transparent);
    --focus: var(--c-cobalt);
    --action: var(--c-ink);            /* go-link fill, button, current nav item (§6.2) */
    --on-action: var(--c-bone);
    --action-hover: var(--c-cobalt);   /* bone on cobalt 7.0 */
    --mark-moon: var(--c-cobalt);      /* the moon in the header's sun-and-moon mark */
    --shape-1: var(--c-saffron);
    --shape-2: var(--c-blush);
    --shape-3: var(--c-cobalt);
    --shape-4: var(--c-ink);
    --placeholder: var(--c-cobalt-soft);
    /* Light text on dark fields is set one step lighter and looser (§4.1) */
    --w-adjust: 0;
    --tr-adjust: 0em;
    --lh-adjust: 0;
    --smoothing: antialiased;     /* every field, light ones too (gate A) */
    --smoothing-moz: grayscale;
  }

  .f-blush {
    --ground: var(--c-blush);
    --surface: var(--c-paper);
    --fg: var(--c-ink);
    --fg-muted: var(--c-ink-2);
    --accent: var(--c-cobalt);
    --link: var(--c-cobalt);
    --line: color-mix(in srgb, var(--c-ink) 60%, transparent);
    --focus: var(--c-cobalt);
    --action: var(--c-ink);
    --on-action: var(--c-bone);
    --action-hover: var(--c-cobalt);
    --mark-moon: var(--c-cobalt);
    --shape-1: var(--c-saffron);
    --shape-2: var(--c-cobalt);
    --shape-3: var(--c-ink);
    --shape-4: var(--c-ink);
    --placeholder: var(--c-paper);
    --w-adjust: 0;
    --tr-adjust: 0em;
    --lh-adjust: 0;
    --smoothing: antialiased;     /* every field, light ones too (gate A) */
    --smoothing-moz: grayscale;
  }

  .f-cobalt,
  .f-ink {
    --surface: var(--c-paper);
    --fg: var(--c-bone);
    --fg-muted: var(--c-cobalt-soft);
    --link: var(--c-bone);
    --focus: var(--c-saffron);
    --action: var(--c-saffron);        /* ink on saffron 8.9; an ink fill would vanish on ink */
    --on-action: var(--c-ink);
    --action-hover: var(--c-bone);     /* ink on bone 14.6 */
    --shape-1: var(--c-saffron);
    --shape-2: var(--c-blush);
    --w-adjust: -25;   /* half a step lighter, because antialiasing already thins it (gate A) */
    --tr-adjust: 0.01em;
    --lh-adjust: 0.05;
    --smoothing: antialiased;
    --smoothing-moz: grayscale;
  }

  .f-cobalt {
    --ground: var(--c-cobalt);
    --mark-moon: var(--c-bone);
    --accent: var(--c-saffron);   /* 4.3:1: text 24px and up only */
    --line: color-mix(in srgb, var(--c-bone) 50%, transparent);
    --shape-3: var(--c-bone);
    --shape-4: var(--c-bone);
    --placeholder: var(--c-cobalt-soft);
  }

  .f-ink {
    --ground: var(--c-ink);
    --mark-moon: var(--c-blush);
    --accent: var(--c-saffron);
    --line: transparent;          /* no line on ink */
    --shape-3: var(--c-saffron);
    --shape-4: var(--c-blush);
    --placeholder: var(--c-ink-2);
  }
}