/* ============================================================================ Mealovate Legendary — Design Tokens ---------------------------------------------------------------------------- Single source of truth for color, type, space, motion, and elevation in the legendary rebuild. Scoped to `html.legendary` so it coexists with the existing base.css tokens; when the LEGENDARY_UI flag is on for a viewer, gets the `legendary` class and every var() resolves to the new palette without touching legacy pages. Dark mode is the *primary* target: we're a cooking product used at night. Light mode is the adaptation, not the other way around. Both are defined here; [data-theme="light"] opts into light, [data-theme="dark"] forces dark, and no attribute falls back to prefers-color-scheme. Rules of engagement for the rest of the design system: 1. NEVER hardcode a color. If it isn't a token, it isn't a color yet. 2. NEVER hardcode a spacing/radius/z-index value. Extend the scale instead. 3. Type sizes use --text-* tokens. Line heights use --leading-* tokens. 4. Motion uses --motion-* duration and --ease-* easing tokens. 5. Breakpoint literals live in --bp-* so media queries stay consistent. ============================================================================ */ /* --------------------------------------------------------------------------- Font loading ---------------------------------------------------------------------------- Playfair Display is already self-hosted in base.css:2-32; we rely on that @font-face to avoid loading the same font twice. Inter Variable is referenced by --font-body below as the preferred family but is NOT loaded here — we fall through to the native system stack until someone drops an inter-variable.woff2 into /fonts/. This keeps us one font file lighter and avoids a 404 in the meantime. To enable Inter, uncomment the @font-face block once the file is in place. JetBrains Mono is loaded on-demand by the pages that need tabular numerics. --------------------------------------------------------------------------- */ /* @font-face { font-family: 'Inter Variable'; src: url('/fonts/inter-variable.woff2') format('woff2-variations'), url('/fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } */ /* --------------------------------------------------------------------------- Legendary token scope ---------------------------------------------------------------------------- Defined on `html.legendary` so a page without the class continues to use base.css. All legacy variables are redeclared here with new values so existing components don't need to know about the migration. --------------------------------------------------------------------------- */ html.legendary { /* ======================================================================== COLOR — warm charcoal / cream base, terracotta accent ------------------------------------------------------------------------ The terracotta accent at #C45D3E is the existing --editorial-accent from base.css, now promoted to the primary brand color. All eight competing blues are replaced by a single accent scale. ======================================================================== */ /* Terracotta accent scale (primary brand) */ --terracotta-50: #FDF5F2; --terracotta-100: #FBE7DE; --terracotta-200: #F6C9B6; --terracotta-300: #EEA486; --terracotta-400: #E07F59; --terracotta-500: #C45D3E; /* core brand */ --terracotta-600: #A54A30; --terracotta-700: #823825; --terracotta-800: #5F2A1C; --terracotta-900: #3D1C13; /* Warm neutrals — charcoal through cream, no pure black or pure white */ --clay-50: #F7F4EE; /* cream, primary light surface */ --clay-100: #EDE7DC; --clay-200: #D9D0C1; --clay-300: #B5A996; --clay-400: #8E8271; --clay-500: #6A5F51; --clay-600: #4A4238; --clay-700: #2E2821; --clay-800: #1A1714; --clay-900: #0E0D0B; /* charcoal, primary dark surface */ /* Seasonal accents — used sparingly as category tints */ --color-olive: #6B7039; /* success, fresh/salad */ --color-mustard: #C9A227; /* warning, warmth */ --color-brick: #AE3B2D; /* error, heat */ --color-honey: #E0A52B; /* highlight */ --color-moss: #4C6B40; /* herby accents */ --color-plum: #6B2E4F; /* wine pairings */ /* ======================================================================== Semantic surface + text — DARK MODE DEFAULT ------------------------------------------------------------------------ Assigned in dark flavor first; the [data-theme="light"] block below overrides to light. No theme attribute = dark. ======================================================================== */ color-scheme: dark; --background-color: var(--clay-900); --surface-primary: var(--clay-900); --surface-secondary: var(--clay-800); --surface-tertiary: var(--clay-700); --surface-elevated: #141210; --surface-inset: #0A0908; --surface-glass: rgba(20, 18, 16, 0.72); --text-color: #F2EDE3; --text-secondary: var(--clay-200); --text-muted: var(--clay-300); --text-inverse: var(--clay-900); --text-brand: var(--terracotta-300); --border-color: rgba(181, 169, 150, 0.16); --border-strong: rgba(181, 169, 150, 0.32); --divider-color: rgba(181, 169, 150, 0.10); /* Brand accent (works identically in light and dark) */ --accent-color: var(--terracotta-500); --accent-hover: var(--terracotta-400); --accent-active: var(--terracotta-600); --accent-muted: rgba(196, 93, 62, 0.14); --accent-subtle: rgba(196, 93, 62, 0.08); --accent-contrast: #FFFFFF; /* Legacy tokens remapped onto the new palette so existing CSS keeps working when `legendary` is active. */ --primary-color: var(--text-color); --secondary-color: var(--text-secondary); --accent-light: var(--accent-subtle); --editorial-accent: var(--terracotta-500); /* Semantic feedback colors (olive/brick/honey, not bootstrap red/green) */ --color-success: var(--color-olive); --color-success-bg: rgba(107, 112, 57, 0.16); --color-warning: var(--color-mustard); --color-warning-bg: rgba(201, 162, 39, 0.16); --color-error: var(--color-brick); --color-error-bg: rgba(174, 59, 45, 0.16); --color-info: var(--terracotta-300); --color-info-bg: var(--accent-muted); /* ======================================================================== TYPOGRAPHY — editorial serif display, humanist sans body, precise mono ======================================================================== */ --font-display: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif; --font-body: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Kept for legacy references */ --font-sans: var(--font-body); --font-serif: var(--font-display); --font-heading: var(--font-display); /* Perfect fourth (1.333) scale, anchored at 16px. We use perfect fourth rather than the existing major third (1.25) because editorial layouts need a little more breathing room between hero and body copy. */ --text-2xs: 0.6875rem; /* 11px — micro labels, eyebrow captions */ --text-xs: 0.75rem; /* 12px — eyebrows, metadata */ --text-sm: 0.875rem; /* 14px — UI text, small body */ --text-base: 1rem; /* 16px — body default */ --text-md: 1.125rem; /* 18px — lead paragraphs */ --text-lg: 1.333rem; /* 21px — small headings */ --text-xl: 1.777rem; /* 28px — section headings */ --text-2xl: 2.369rem; /* 38px — page headings */ --text-3xl: 3.157rem; /* 51px — feature headings */ --text-4xl: 4.209rem; /* 67px — hero display */ --text-5xl: 5.610rem; /* 90px — oversized hero */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* for all-caps eyebrows */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ======================================================================== SPACING — 4px baseline, extended scale ------------------------------------------------------------------------ The legacy scale missed 7, 9, and 11 which forced hardcoded values. The new scale is complete through space-32 (128px). ======================================================================== */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px — iOS min tap target */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ======================================================================== RADIUS — modest for UI, generous for editorial ======================================================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-pill: 9999px; /* ======================================================================== ELEVATION — warm, not pure-black shadows ------------------------------------------------------------------------ All shadows use a warm tint so cards feel like they're resting on a counter rather than floating over cold gray. ======================================================================== */ --shadow-xs: 0 1px 2px rgba(14, 13, 11, 0.24); --shadow-sm: 0 2px 4px rgba(14, 13, 11, 0.28), 0 1px 2px rgba(14, 13, 11, 0.18); --shadow-md: 0 6px 12px rgba(14, 13, 11, 0.32), 0 2px 4px rgba(14, 13, 11, 0.18); --shadow-lg: 0 12px 24px rgba(14, 13, 11, 0.38), 0 4px 8px rgba(14, 13, 11, 0.20); --shadow-xl: 0 24px 48px rgba(14, 13, 11, 0.44), 0 8px 16px rgba(14, 13, 11, 0.24); --shadow-2xl: 0 40px 80px rgba(14, 13, 11, 0.52), 0 16px 32px rgba(14, 13, 11, 0.28); --shadow-inset: inset 0 1px 2px rgba(14, 13, 11, 0.24); /* Terracotta-tinted glow for accent interactions */ --glow-accent: 0 0 0 3px rgba(196, 93, 62, 0.28), 0 8px 24px rgba(196, 93, 62, 0.18); --shadow-card: var(--shadow-md); --shadow-hover: var(--shadow-lg); /* ======================================================================== Z-INDEX — stacking layer tokens (kills the 975/9998/10001/10002 mess) ======================================================================== */ --z-base: 0; --z-rise: 10; --z-sticky: 20; --z-header: 30; --z-drawer: 40; --z-overlay: 50; --z-modal: 60; --z-toast: 70; --z-tooltip: 80; --z-command: 90; /* command palette */ --z-debug: 100; /* ======================================================================== MOTION — spring easing, three-duration scale ======================================================================== */ --motion-instant: 0ms; --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; --motion-slower: 600ms; --ease-linear: linear; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1); /* Spring easing — already used on toasts in utilities.css. Promoted to the default "physical" transition for hover, press, and drawer. */ --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* Shortcuts used by most components */ --transition-colors: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); --transition-transform: transform var(--motion-base) var(--ease-spring); --transition-all: all var(--motion-base) var(--ease-spring); /* Legacy alias */ --transition-speed: var(--motion-base); /* ======================================================================== BREAKPOINTS — 4 values, used by utility media queries ------------------------------------------------------------------------ These are informational — CSS custom properties don't work inside @media queries (yet). Components should reference these numerically in media queries to keep the same values. Keep this list in sync with the :where() helpers in atoms.css. ======================================================================== */ --bp-sm: 520px; /* small phones → phones */ --bp-md: 768px; /* phones → tablets */ --bp-lg: 1024px; /* tablets → desktop */ --bp-xl: 1280px; /* desktop → wide */ /* ======================================================================== LAYOUT WIDTHS ======================================================================== */ --width-prose: 68ch; /* editorial body column */ --width-narrow: 40rem; /* auth/marketing cards */ --width-content: 64rem; /* standard page content */ --width-wide: 80rem; /* wide layouts */ --width-max: 96rem; /* max page width before margin */ /* ======================================================================== PRIMITIVE UTILS ======================================================================== */ --focus-ring: 0 0 0 3px rgba(196, 93, 62, 0.48); --backdrop: rgba(14, 13, 11, 0.72); --grain-overlay-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- Light mode overrides — only applied when explicitly requested --------------------------------------------------------------------------- */ html.legendary[data-theme="light"] { color-scheme: light; --background-color: var(--clay-50); --surface-primary: var(--clay-50); --surface-secondary: #FFFFFF; --surface-tertiary: var(--clay-100); --surface-elevated: #FFFFFF; --surface-inset: var(--clay-100); --surface-glass: rgba(247, 244, 238, 0.82); --text-color: var(--clay-900); --text-secondary: var(--clay-700); --text-muted: var(--clay-500); --text-inverse: var(--clay-50); --text-brand: var(--terracotta-600); --border-color: rgba(46, 40, 33, 0.14); --border-strong: rgba(46, 40, 33, 0.28); --divider-color: rgba(46, 40, 33, 0.08); --accent-muted: rgba(196, 93, 62, 0.10); --accent-subtle: rgba(196, 93, 62, 0.06); --primary-color: var(--text-color); --secondary-color: var(--text-secondary); --accent-light: var(--accent-subtle); --color-success-bg: rgba(107, 112, 57, 0.12); --color-warning-bg: rgba(201, 162, 39, 0.14); --color-error-bg: rgba(174, 59, 45, 0.12); --color-info-bg: var(--accent-muted); --shadow-xs: 0 1px 2px rgba(46, 40, 33, 0.06); --shadow-sm: 0 2px 4px rgba(46, 40, 33, 0.08), 0 1px 2px rgba(46, 40, 33, 0.04); --shadow-md: 0 6px 12px rgba(46, 40, 33, 0.10), 0 2px 4px rgba(46, 40, 33, 0.06); --shadow-lg: 0 12px 24px rgba(46, 40, 33, 0.12), 0 4px 8px rgba(46, 40, 33, 0.06); --shadow-xl: 0 24px 48px rgba(46, 40, 33, 0.14), 0 8px 16px rgba(46, 40, 33, 0.08); --shadow-2xl: 0 40px 80px rgba(46, 40, 33, 0.18), 0 16px 32px rgba(46, 40, 33, 0.10); --shadow-inset: inset 0 1px 2px rgba(46, 40, 33, 0.08); --backdrop: rgba(14, 13, 11, 0.48); } /* --------------------------------------------------------------------------- Auto dark mode when no explicit theme attribute --------------------------------------------------------------------------- The default above is already dark, so this block only flips *into* light mode for users whose OS is light AND who have not explicitly chosen a theme. This keeps the "dark-first" promise while still respecting OS preference. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { html.legendary:not([data-theme]) { color-scheme: light; --background-color: var(--clay-50); --surface-primary: var(--clay-50); --surface-secondary: #FFFFFF; --surface-tertiary: var(--clay-100); --surface-elevated: #FFFFFF; --surface-inset: var(--clay-100); --surface-glass: rgba(247, 244, 238, 0.82); --text-color: var(--clay-900); --text-secondary: var(--clay-700); --text-muted: var(--clay-500); --text-inverse: var(--clay-50); --text-brand: var(--terracotta-600); --border-color: rgba(46, 40, 33, 0.14); --border-strong: rgba(46, 40, 33, 0.28); --divider-color: rgba(46, 40, 33, 0.08); --accent-muted: rgba(196, 93, 62, 0.10); --accent-subtle: rgba(196, 93, 62, 0.06); --primary-color: var(--text-color); --secondary-color: var(--text-secondary); --accent-light: var(--accent-subtle); --shadow-xs: 0 1px 2px rgba(46, 40, 33, 0.06); --shadow-sm: 0 2px 4px rgba(46, 40, 33, 0.08), 0 1px 2px rgba(46, 40, 33, 0.04); --shadow-md: 0 6px 12px rgba(46, 40, 33, 0.10), 0 2px 4px rgba(46, 40, 33, 0.06); --shadow-lg: 0 12px 24px rgba(46, 40, 33, 0.12), 0 4px 8px rgba(46, 40, 33, 0.06); --shadow-xl: 0 24px 48px rgba(46, 40, 33, 0.14), 0 8px 16px rgba(46, 40, 33, 0.08); --shadow-2xl: 0 40px 80px rgba(46, 40, 33, 0.18), 0 16px 32px rgba(46, 40, 33, 0.10); --shadow-inset: inset 0 1px 2px rgba(46, 40, 33, 0.08); --backdrop: rgba(14, 13, 11, 0.48); } } /* --------------------------------------------------------------------------- Global reduced motion — zeroes transitions and animations for users who request it. Must be declared on `html.legendary` so it's scoped. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.legendary, html.legendary *, html.legendary *::before, html.legendary *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }