/* ================================================================ Compound Review — Design Tokens Phase 2 Wave A deliverable, drafted 2026-04-29 Single source of truth for the Phase 3 Astro + Tailwind 4 build. Consume in Phase 3 as: @import "tailwindcss"; @import "./tokens.css"; // promotes these into Tailwind's @theme All tokens are documented in `phase-2/01-visual-identity.md`. Edit there first; this file mirrors that spec. ================================================================ */ @theme { /* --------------------------------------------------------------- 1. Color — slate (ink ramp) --------------------------------------------------------------- */ --color-slate-50: #F7F8FA; --color-slate-100: #ECEEF2; --color-slate-200: #D7DCE4; --color-slate-300: #B5BEC9; --color-slate-400: #8593A1; --color-slate-500: #5A6877; --color-slate-600: #3F4B58; --color-slate-700: #2C3641; --color-slate-800: #1E262F; --color-slate-900: #131A21; --color-slate-950: #0A0E12; /* --------------------------------------------------------------- 2. Color — teal (supporting) --------------------------------------------------------------- */ --color-teal-50: #EFF6F5; --color-teal-100: #D5E5E2; --color-teal-300: #88B5AE; --color-teal-500: #3F827A; --color-teal-700: #2A5651; --color-teal-900: #163530; /* --------------------------------------------------------------- 3. Color — amber (signal / CTA) --------------------------------------------------------------- */ --color-amber-100: #FBEFCF; --color-amber-300: #EBC461; --color-amber-500: #C58A1F; --color-amber-600: #A87513; --color-amber-700: #8A5E0E; /* --------------------------------------------------------------- 4. Color — semantic (validation only) --------------------------------------------------------------- */ --color-success-50: #E6F3EB; --color-success-500: #2D7A4B; --color-error-50: #FBEAE7; --color-error-500: #B53024; --color-info-500: var(--color-teal-500); --color-warning-500: var(--color-amber-500); /* --------------------------------------------------------------- 5. Surface aliases (semantic naming for templates) --------------------------------------------------------------- */ --color-surface: var(--color-slate-50); --color-surface-raised: #FFFFFF; --color-surface-section: var(--color-slate-100); --color-surface-method: var(--color-teal-50); --color-surface-cta: var(--color-amber-100); --color-surface-inverse: var(--color-slate-900); --color-ink: var(--color-slate-900); --color-ink-strong: var(--color-slate-950); --color-ink-muted: var(--color-slate-500); --color-ink-disabled: var(--color-slate-300); --color-ink-inverse: var(--color-slate-50); --color-link: var(--color-teal-500); --color-link-hover: var(--color-teal-700); --color-border: var(--color-slate-200); --color-border-strong: var(--color-slate-300); --color-border-focus: var(--color-amber-500); /* --------------------------------------------------------------- 6. Typography — families --------------------------------------------------------------- */ --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", "Apple Garamond", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace; /* --------------------------------------------------------------- 7. Typography — type scale (rem; base = 16 px) --------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --text-7xl: 4.5rem; /* 72 — OG card title only */ /* --------------------------------------------------------------- 8. Typography — line-height, tracking, weights --------------------------------------------------------------- */ --leading-tight: 1.10; --leading-snug: 1.20; --leading-normal: 1.45; --leading-relaxed: 1.65; --leading-loose: 1.75; --tracking-tighter: -0.012em; --tracking-tight: -0.005em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --------------------------------------------------------------- 9. Spacing scale (4 px base, 8 px rhythm) --------------------------------------------------------------- */ --spacing-0: 0; --spacing-1: 0.25rem; /* 4 */ --spacing-2: 0.5rem; /* 8 */ --spacing-3: 0.75rem; /* 12 */ --spacing-4: 1rem; /* 16 */ --spacing-6: 1.5rem; /* 24 */ --spacing-8: 2rem; /* 32 */ --spacing-12: 3rem; /* 48 */ --spacing-16: 4rem; /* 64 */ --spacing-24: 6rem; /* 96 */ --spacing-32: 8rem; /* 128 */ --spacing-48: 12rem; /* 192 */ --spacing-64: 16rem; /* 256 */ /* --------------------------------------------------------------- 10. Container widths (max-widths for layout) --------------------------------------------------------------- */ --container-prose: 45rem; /* 720 px — article body */ --container-form: 30rem; /* 480 px — signup card */ --container-table: 64rem; /* 1024 px — reference */ --container-site: 80rem; /* 1280 px — outer max */ --container-og: 75rem; /* 1200 px — OG card */ /* --------------------------------------------------------------- 11. Border radius — kept square --------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* modal only */ --radius-full: 9999px; /* avatar only */ /* --------------------------------------------------------------- 12. Shadows — restrained (no glow, no inner shadow) --------------------------------------------------------------- */ --shadow-xs: 0 1px 0 rgba(19, 26, 33, 0.06); --shadow-sm: 0 1px 2px rgba(19, 26, 33, 0.08); --shadow-md: 0 2px 8px rgba(19, 26, 33, 0.10); --shadow-lg: 0 8px 24px rgba(19, 26, 33, 0.12); /* --------------------------------------------------------------- 13. Motion --------------------------------------------------------------- */ --duration-default: 200ms; --duration-entrance: 280ms; --duration-exit: 180ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* --------------------------------------------------------------- 14. Breakpoints (mirrored for explicit reference; Tailwind 4 derives screens from these.) --------------------------------------------------------------- */ --breakpoint-sm: 30rem; /* 480 */ --breakpoint-md: 48rem; /* 768 */ --breakpoint-lg: 64rem; /* 1024 */ --breakpoint-xl: 80rem; /* 1280 */ --breakpoint-2xl: 90rem; /* 1440 */ /* --------------------------------------------------------------- 15. Z-index ladder (kept flat) --------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; /* RUO banner, sticky nav */ --z-overlay: 1000; /* popover, dropdown */ --z-modal: 2000; /* age gate, lead-magnet popup */ --z-toast: 3000; /* form success/error banner */ } /* ================================================================== Utility classes that aren't generated by Tailwind defaults. Kept narrow — the design system prefers Tailwind utilities. ================================================================== */ /* Tabular numerals for tables and reference lists */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Disable ligatures in monospace so `--`, `<-`, `=>` render literally */ .no-liga { font-feature-settings: "liga" 0, "clig" 0; } /* Focus ring — applied by Tailwind's focus-visible: utility chain */ .focus-ring { outline: 2px solid var(--color-amber-500); outline-offset: 2px; border-radius: var(--radius-sm); } /* Reduced motion — apply globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Skip link — hidden until focused */ .skip-link { position: absolute; inset-block-start: -9999px; inset-inline-start: 0; padding: var(--spacing-3) var(--spacing-4); background: var(--color-ink-strong); color: var(--color-ink-inverse); font-family: var(--font-sans); font-weight: var(--weight-semibold); text-decoration: none; z-index: var(--z-toast); } .skip-link:focus { inset-block-start: 0; }