/* ui2-tokens.css — UI2 design tokens. * * Single source of truth for the UI2 visual language, mirroring the * mockup's `styles.css` :root block exactly. Loaded under `body.ui2` * scope so existing prod pages aren't affected until they opt in. * * Per-page CSS may extend by adding more vars under `body.ui2.page-X`, * but the primary palette / typography / shadow scale lives here only. * * Naming convention: `--ui2--` for tokens; bare names * (--cream, --ink, etc.) are intentionally NOT used here to avoid * colliding with prod's existing `:root` (which uses different values * for the warm cream/ink). Per-page UI2 stylesheets read `--ui2-*` * vars to stay decoupled from prod tokens. * * If a page binds prod styles via `body:not(.ui2)`, it remains * untouched. Opt in by adding `class="ui2"` to . */ body.ui2 { /* === Warm amber palette === */ --ui2-amber-50: #FFF8F1; --ui2-amber-100: #FFE9D2; --ui2-amber-200: #FCD0A2; --ui2-amber-300: #F8B26A; --ui2-amber-400: #F08F3B; --ui2-amber-500: #E8590C; /* primary brand */ --ui2-amber-600: #C8460A; /* italic-em accent */ --ui2-amber-700: #9C3508; --ui2-amber-800: #6E2305; /* === Warm neutrals === */ --ui2-cream: #FAF6F0; --ui2-paper: #F4EEE3; --ui2-paper-2: #ECE4D4; --ui2-ink: #1A1614; --ui2-ink-2: #2C2622; --ui2-ink-3: #4A4239; --ui2-ink-4: #6E6458; --ui2-ink-5: #9A8F80; --ui2-rule: #DCD2BF; /* === States (muted, editorial) === */ --ui2-good: #4F7A4A; --ui2-warn: #B6791F; --ui2-bad: #A23F2A; /* === Type === */ --ui2-font-serif: "Instrument Serif", "Source Serif 4", Georgia, serif; --ui2-font-sans: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif; --ui2-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --ui2-font-hand: "Caveat", cursive; /* === Radii === */ --ui2-radius: 4px; --ui2-radius-lg: 8px; /* === Shadows — paper, not glassy === */ --ui2-shadow-sm: 0 1px 0 rgba(26, 22, 20, 0.04), 0 1px 2px rgba(26, 22, 20, 0.06); --ui2-shadow-md: 0 1px 0 rgba(26, 22, 20, 0.04), 0 4px 12px rgba(26, 22, 20, 0.08); --ui2-shadow-lg: 0 2px 0 rgba(26, 22, 20, 0.04), 0 16px 40px rgba(26, 22, 20, 0.12); } /* Body baseline applies only when ui2 class is set. */ body.ui2 { background: var(--ui2-cream); color: var(--ui2-ink); font-family: var(--ui2-font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.ui2 ::selection { background: var(--ui2-amber-200); color: var(--ui2-ink); } /* Subtle paper grain (matches mockup body::before). Sits behind content; pointer-events:none so it never blocks clicks. */ body.ui2::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 1px 1px, rgba(26, 22, 20, 0.02) 1px, transparent 0); background-size: 3px 3px; opacity: 0.6; } body.ui2 a { color: inherit; text-decoration: none; } /* Section z-index above the paper grain. */ body.ui2 section { position: relative; z-index: 1; }