chore: project scaffold, specs, and working record

src/styles/tokens.css

@@ -0,0 +1,144 @@
+/* ============================================================================
+   Design tokens — the single source of colour, type, space, and motion.
+   Spec: docs/02-design-system.md
+
+   Never write a raw hex value or a magic number in a component. If a value is
+   missing here, add it here.
+   ========================================================================= */
+
+:root {
+  /* --- Colour ------------------------------------------------------------
+     Palette carried over unchanged from the previous build (AGENTS.md D7).
+     Contrast ratios measured 2026-08-25 and recorded in docs/02.          */
+
+  --cream:      #faf7f2;   /* page background                              */
+  --cream-2:    #f3ede0;   /* alternating section background               */
+  --cream-3:    #ebe3d1;   /* cards and insets on cream                    */
+
+  --ink:        #1a1614;   /* body text; dark section backgrounds  16.81:1 */
+  --ink-soft:   #3a322c;   /* secondary text                      11.75:1  */
+  --muted:      #6e6359;   /* metadata — ON CREAM ONLY (3.07:1 on ink)     */
+
+  --maroon:     #5a1a1c;   /* primary action, dark panels         12.29:1  */
+  --maroon-d:   #3d1112;   /* hover on maroon                              */
+  --maroon-l:   #7a2a2c;   /* links on cream                       8.95:1  */
+
+  /* GOLD IS NOT A TEXT COLOUR ON CREAM.
+     --gold on cream measures 2.10:1 and fails AA for body AND large text.
+     --gold-d measures 3.11:1 — large decorative text only, 24px+.
+     Both are fine on --ink (8.00) and --maroon (5.84). See docs/02.        */
+  --gold:       #c9a876;   /* rules, dividers, icon strokes, on-dark text  */
+  --gold-d:     #a88858;   /* large decorative display text on cream only  */
+  --gold-l:     #e2c89a;   /* text on ink or maroon               11.09:1  */
+
+  --line:       rgb(26 22 20 / 0.10);
+  --line-2:     rgb(26 22 20 / 0.06);
+  --line-dark:  rgb(250 247 242 / 0.14);
+
+  /* Semantic aliases — prefer these in components over raw palette names. */
+  --bg:              var(--cream);
+  --bg-alt:          var(--cream-2);
+  --bg-raised:       var(--cream-3);
+  --bg-inverse:      var(--ink);
+  --text:            var(--ink);
+  --text-secondary:  var(--ink-soft);
+  --text-meta:       var(--muted);
+  --text-inverse:    var(--cream);
+  --text-inverse-2:  var(--gold-l);
+  --accent:          var(--maroon);
+  --accent-hover:    var(--maroon-d);
+  --link:            var(--maroon-l);
+  --rule:            var(--gold);
+  --border:          var(--line);
+  --focus-ring:      var(--maroon);
+
+  /* --- Type -------------------------------------------------------------- */
+
+  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Fluid scale, 360px → 1600px viewport. Ratio widens toward the display
+     end (1.25 → 1.333) so headlines scale harder than body copy.          */
+  --text-xs:   0.75rem;                                    /* 12  — legal   */
+  --text-sm:   0.875rem;                                   /* 14  — meta    */
+  --text-base: 1rem;                                       /* 16  — body    */
+  --text-lg:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);   /* 17→19   */
+  --text-xl:   clamp(1.25rem,  1.14rem + 0.48vw,  1.5rem);      /* 20→24   */
+  --text-2xl:  clamp(1.5rem,   1.31rem + 0.81vw,  1.875rem);    /* 24→30   */
+  --text-3xl:  clamp(1.875rem, 1.55rem + 1.37vw,  2.5rem);      /* 30→40   */
+  --text-4xl:  clamp(2.25rem,  1.66rem + 2.50vw,  3.5rem);      /* 36→56   */
+  --text-5xl:  clamp(2.75rem,  1.75rem + 4.25vw,  4.75rem);     /* 44→76   */
+  --text-6xl:  clamp(3.25rem,  1.75rem + 6.35vw,  6rem);        /* 52→96   */
+
+  --leading-display: 0.98;
+  --leading-tight:   1.15;
+  --leading-snug:    1.35;
+  --leading-body:    1.6;
+  --leading-relaxed: 1.75;
+
+  --tracking-display: -0.02em;
+  --tracking-tight:   -0.01em;
+  --tracking-normal:  0;
+  --tracking-wide:    0.06em;
+  --tracking-eyebrow: 0.18em;
+
+  --weight-light:  300;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semi:   600;
+
+  /* --- Space — 8px base -------------------------------------------------- */
+
+  --space-1:  0.25rem;   /*   4 */
+  --space-2:  0.5rem;    /*   8 */
+  --space-3:  0.75rem;   /*  12 */
+  --space-4:  1rem;      /*  16 */
+  --space-5:  1.5rem;    /*  24 */
+  --space-6:  2rem;      /*  32 */
+  --space-7:  3rem;      /*  48 */
+  --space-8:  4rem;      /*  64 */
+  --space-9:  6rem;      /*  96 */
+  --space-10: 8rem;      /* 128 */
+  --space-11: 10rem;     /* 160 */
+
+  --section-y: clamp(var(--space-9), 6vw + 2rem, var(--space-11));
+
+  /* --- Layout ------------------------------------------------------------ */
+
+  --width-content: 80rem;   /* 1280 */
+  --width-wide:    90rem;   /* 1440 */
+  --width-prose:   68ch;    /* reading measure — never exceed for body copy */
+  --gutter:        var(--space-5);
+  --gutter-lg:     var(--space-7);
+
+  /* --- Radius, elevation, motion ----------------------------------------- */
+
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   16px;
+  --radius-full: 999px;
+
+  --shadow-sm: 0 1px 2px rgb(26 22 20 / 0.04);
+  --shadow-md: 0 4px 16px rgb(26 22 20 / 0.06);
+  --shadow-lg: 0 12px 40px rgb(26 22 20 / 0.10);
+
+  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
+  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
+  --dur-fast:    150ms;
+  --dur-hover:   250ms;
+  --dur-reveal:  600ms;
+
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-header: 200;
+  --z-overlay: 300;
+  --z-skip: 400;
+}
+
+@media (min-width: 48rem) {
+  :root { --gutter: var(--gutter-lg); }
+}
+
+/* No dark mode by design (docs/02). A single committed light identity is the
+   right call for a legal practice and halves the ways contrast can break.   */