/* ============================================================ QUEDZAL DESIGN TOKENS · tokens.css Single source of truth for color, type, spacing, motion. Import once, globally, before any other stylesheet. ============================================================ */ :root{ /* ---- BRAND / IDENTITY (emerald family) ---- */ --emerald: #0B5D3B; /* primary brand — logo, links, headings accent */ --emerald-deep: #062E1E; /* dark surfaces, dark sections, footers of dark UI */ --teal: #0E8E6B; /* secondary brand green — kickers, eyebrows */ --jade: #27D199; /* bright highlight green — on-dark accents, success */ /* ---- ACTION (crimson — the spark) ---- */ --crimson: #E0492F; /* ALL primary CTAs, urgent/high signals, active dots */ --crimson-ink: #FFF1ED; /* text on crimson */ --crimson-tint: rgba(224,73,47,.12); /* crimson backgrounds (pills) */ /* ---- ACCENT SET (icons & data-viz ONLY — never UI chrome) ---- */ --coral: #FF6A43; --gold: #F2A938; --gold-ink: #C9820F; /* gold used as icon stroke (darker, legible) */ --amber: #FFC15A; --cyan: #119FBC; --cyan-ink: #0E8DA6; /* cyan used as icon stroke (darker, legible) */ --sky: #46C9DD; /* ---- SURFACES (light, default) ---- */ --bone: #FAF8F2; /* app/page background — warm near-white */ --bone-2: #F1ECE0; /* alternating section / inset background */ --paper: #FFFFFF; /* cards, panels, raised surfaces */ /* ---- TEXT (on light) ---- */ --ink: #13201A; /* primary text — near-black green-tinted */ --ink-soft: #41524A; /* secondary text, body copy */ --ink-faint: #7A887F; /* captions, meta, placeholders, disabled */ /* ---- LINES ---- */ --line: rgba(19,32,26,.12); /* hairlines, card borders */ --line-strong: rgba(19,32,26,.20); /* outline buttons, dividers */ /* ---- STATUS (mapped to brand palette) ---- */ --success: #0E8E6B; --success-tint: rgba(14,142,107,.12); --warning: #F2A938; --warning-tint: rgba(242,169,56,.14); --danger: #E0492F; --danger-tint: rgba(224,73,47,.12); --info: #119FBC; --info-tint: rgba(17,159,188,.12); /* ---- BUYER-INTENT (product semantics) ---- */ --intent-high: var(--crimson); --intent-medium: var(--gold); --intent-low: var(--teal); --intent-none: var(--ink-faint); /* ---- ELEVATION ---- */ --shadow-sm: 0 1px 2px rgba(6,46,30,.06), 0 4px 14px rgba(6,46,30,.05); --shadow-md: 0 10px 30px rgba(6,46,30,.10), 0 2px 8px rgba(6,46,30,.06); --shadow-lg: 0 30px 70px rgba(6,46,30,.18), 0 8px 24px rgba(6,46,30,.10); /* ---- RADII ---- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px; /* ---- SPACING (4px base scale) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---- LAYOUT ---- */ --maxw: 1180px; /* marketing content width */ --maxw-app: 1440px; /* app shell width */ --maxw-prose: 720px; /* reading width */ /* ---- TYPOGRAPHY ---- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* Inter is the tabular workhorse — used for numeric cells (metrics, prices, percentages, ETAs). Tighter rhythm than Hanken for dense data UI; the editorial display + body voice stays Fraunces + Hanken. */ --font-numeric: 'Inter', 'Inter Display', system-ui, sans-serif; --fs-display: clamp(40px, 5.4vw, 68px); --fs-h1: clamp(34px, 4.6vw, 56px); --fs-h2: clamp(28px, 3.4vw, 44px); --fs-h3: 22px; --fs-h4: 18px; --fs-lead: 19px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px; --fs-kicker: 13px; --lh-tight: 1.04; /* display + headings */ --lh-snug: 1.3; --lh-body: 1.6; --ls-tight: -.015em; /* headings */ --ls-kicker: .13em; /* uppercase eyebrows */ --weight-display: 540; --weight-heading: 560; --weight-semibold: 600; --weight-bold: 700; /* ---- MOTION ---- */ --ease-out: cubic-bezier(.2,.7,.2,1); /* default reveal / entrance */ --ease-spring: cubic-bezier(.2,.8,.2,1); /* button press / hover lift */ --dur-fast: .18s; --dur-base: .25s; --dur-slow: .7s; /* ---- FOCUS ---- */ --focus-ring: 0 0 0 3px rgba(14,142,107,.35); } /* ============================================================ DARK SURFACES · apply via [data-theme="dark"] on a wrapper (used for: marketing showcase sections, optional inbox "focus mode". Brand + action + accent tokens are unchanged.) ============================================================ */ [data-theme="dark"]{ --bg: #062E1E; /* emerald-deep base */ --surface: rgba(255,255,255,.04); /* raised panel */ --surface-2: rgba(255,255,255,.07); /* hover / active panel */ --paper: rgba(255,255,255,.05); --line: rgba(232,244,238,.12); --line-strong: rgba(232,244,238,.22); --ink: #F2FAF6; --ink-soft: rgba(232,244,238,.72); --ink-faint: rgba(232,244,238,.45); --bone: #062E1E; --bone-2: #04241844; /* on dark, the highlight green replaces emerald for accents */ --emerald: var(--jade); } /* ============================================================ EDITORIAL LEDGER · admin-only theme Warm parchment, single marigold accent, Fraunces italic headings + IBM Plex Mono numbers. Scoped via [data-admin-theme="ledger"] on — never bleeds into the public site or product app. ============================================================ */ [data-admin-theme="ledger"]{ /* surfaces — warm parchment */ --lg-parchment: #F7F1E6; /* page background */ --lg-parchment-2: #EFE6D3; /* alt rows, inset */ --lg-paper: #FBF6EC; /* card / panel background */ --lg-paper-2: #F2E9D6; /* sub-panel, table head */ --lg-paper-warm: #FDF9F1; /* slightly lifted card (over parchment) */ /* rules + dividers */ --lg-rule: #E2D5B8; /* hairlines */ --lg-rule-strong: #C9B891; /* dividers, section breaks */ --lg-rule-ink: #2B2519; /* thick editorial rule, masthead */ /* text on parchment */ --lg-ink: #2B2519; /* primary text — warm dark brown */ --lg-ink-soft: #6B5D4A; /* body, secondary */ --lg-ink-faint: #9A8A70; /* meta, captions, placeholders */ --lg-ink-mute: #B8A98A; /* disabled */ /* the single accent */ --lg-marigold: #C9842B; --lg-marigold-deep: #A66A1F; /* hover, pressed */ --lg-marigold-soft: #E6A954; /* light variant for chart strokes */ --lg-marigold-tint: #F4E6CC; /* active nav bg, CTA tint */ --lg-marigold-tint-2: #EFDDB7; /* deeper tint */ --lg-marigold-ink: #FBF6EC; /* text on marigold fill */ /* status palette — desaturated, editorial */ --lg-olive: #6B7F3E; /* success */ --lg-olive-deep: #4D5C2A; --lg-olive-tint: #E5E7CC; --lg-terracotta: #A04A3F; /* danger */ --lg-terracotta-deep:#7B342B; --lg-terracotta-tint:#F2D9CF; --lg-indigo: #4F5B8E; /* info, sparkline accents */ --lg-indigo-deep: #353F69; --lg-indigo-tint: #DDDFE9; --lg-amber: #B8731F; /* warning */ --lg-amber-tint: #F4E2C6; /* typography — admin only */ --lg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --lg-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --lg-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* numeric ramp for editorial display */ --lg-fs-display: 34px; --lg-fs-h1: 26px; --lg-fs-h2: 20px; --lg-fs-h3: 16px; --lg-fs-kicker: 11px; --lg-fs-body: 14px; --lg-fs-meta: 12.5px; --lg-fs-mono: 13px; --lg-fs-mono-lg: 28px; /* spacing, radii, shadow tuned for editorial */ --lg-r-sm: 4px; --lg-r-md: 6px; --lg-r-lg: 10px; --lg-r-pill: 100px; --lg-shadow-card: 0 1px 0 rgba(43,37,25,.04), 0 1px 3px rgba(43,37,25,.05); --lg-shadow-lift: 0 8px 24px rgba(43,37,25,.08), 0 2px 6px rgba(43,37,25,.05); --lg-focus-ring: 0 0 0 3px rgba(201,132,43,.30); }