/* ============================================================ Leolens brand tokens — v2 "Honey & Charcoal" Synced copy; source of truth is leolens-docs/brand/tokens.css. Golden rule: edit colors THERE and nowhere else. Fonts: Caprasimo (display, 400) + Figtree (400/600/700). Dark mode: follows prefers-color-scheme by default; a manual toggle wins by stamping data-theme="dark|light" on . The dark palette therefore appears twice below — keep both blocks identical when editing. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;600;700&display=swap'); :root { color-scheme: light; /* Brand accents */ --ll-brand: #DCA13C; /* honey — CTAs, "you" in charts, highlights (oklch 74% .125 78) */ --ll-brand-ink: #9A6F23; /* honey text/links on light (oklch 55% .105 74) */ --ll-brand-deep: #6A4D1D; /* honey deep — text on butter tints (oklch 40% .08 74) */ --ll-brand-soft: #FFFFE3; /* butter — tint bands, badges, ghost hovers. Never a text color. */ --ll-on-brand: #4A4A4A; /* text on honey fills */ --ll-slate: #6D8196; /* second voice — secondary buttons, ✓-mentioned chips */ --ll-slate-ink: #42546A; /* slate text on light / on slate tint */ --ll-slate-soft: #DFE6EC; /* slate tint fills */ /* Surfaces & ink */ --ll-page: #FAF7EE; /* ivory ground */ --ll-surface: #ffffff; /* cards */ --ll-ink: #4A4A4A; /* charcoal — headings, body */ --ll-ink-2: #6b6b60; /* secondary text */ --ll-muted: #85857a; /* captions, price notes */ --ll-border: rgba(74, 74, 74, 0.12); --ll-chip: rgba(74, 74, 74, 0.07); /* neutral chip/track fill */ /* Data marks */ --ll-rival: #CBCBCB; /* competitors, secondary series */ --ll-alert: #C25746; /* misses, gaps, "not mentioned" */ /* Status (report severity — unchanged from v1) */ --ll-good: #0ca30c; --ll-warning: #fab219; --ll-serious: #ec835a; --ll-critical: #d03b3b; /* Type */ --ll-font-display: 'Caprasimo', serif; /* weight 400 only */ --ll-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Shape & elevation */ --ll-radius-pill: 999px; /* buttons, inputs, chips */ --ll-radius-card: 24px; /* cards 20–28px */ --ll-radius-tile: 16px; /* nested tiles 14–16px */ --ll-shadow-sm: 0 2px 10px -4px rgba(74, 74, 74, 0.18); --ll-shadow-md: 0 10px 26px -12px rgba(74, 74, 74, 0.30); --ll-shadow-lg: 0 20px 44px -18px rgba(74, 74, 74, 0.32); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --ll-brand: #E7B054; /* honey, lifted for charcoal (oklch 78% .12 80) */ --ll-brand-ink: #F0C273; /* honey text/links on dark (oklch 82% .11 82) */ --ll-brand-deep: #F6D695; --ll-brand-soft: #5E5138; /* butter tint on dark (oklch 42% .05 82) */ --ll-on-brand: #4A4A4A; --ll-slate: #8FA3B8; --ll-slate-ink: #CDD9E4; --ll-slate-soft: #3E4A56; --ll-page: #4A4A4A; /* charcoal poster ground */ --ll-surface: #575751; --ll-ink: #FFFFE3; /* butter becomes the ink */ --ll-ink-2: #d6d6c2; --ll-muted: #b3b3a2; --ll-border: rgba(255, 255, 227, 0.13); --ll-chip: rgba(255, 255, 227, 0.09); --ll-rival: #8A8A83; --ll-alert: #E0796A; --ll-shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.35); --ll-shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.5); --ll-shadow-lg: 0 22px 48px -18px rgba(0, 0, 0, 0.55); } } :root[data-theme='dark'] { color-scheme: dark; --ll-brand: #E7B054; /* honey, lifted for charcoal (oklch 78% .12 80) */ --ll-brand-ink: #F0C273; /* honey text/links on dark (oklch 82% .11 82) */ --ll-brand-deep: #F6D695; --ll-brand-soft: #5E5138; /* butter tint on dark (oklch 42% .05 82) */ --ll-on-brand: #4A4A4A; --ll-slate: #8FA3B8; --ll-slate-ink: #CDD9E4; --ll-slate-soft: #3E4A56; --ll-page: #4A4A4A; /* charcoal poster ground */ --ll-surface: #575751; --ll-ink: #FFFFE3; /* butter becomes the ink */ --ll-ink-2: #d6d6c2; --ll-muted: #b3b3a2; --ll-border: rgba(255, 255, 227, 0.13); --ll-chip: rgba(255, 255, 227, 0.09); --ll-rival: #8A8A83; --ll-alert: #E0796A; --ll-shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.35); --ll-shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.5); --ll-shadow-lg: 0 22px 48px -18px rgba(0, 0, 0, 0.55); }