/** * CurioChat Design Tokens * ====================== * Single source of truth for all CSS custom properties used across: * - curiochat.ai (main site) * - curiochat.com (academy / companion site) * - curiochat_blog (Hugo blog) * * Usage: import this file first, then import design-system.css. * * Architecture (v1.5.0 onward) — TWO LAYERS: * 1. Raw palette — brand hues, neutrals, raw hex values, base scales. * 2. Semantic — every token consumed by components. Resolves via var() * to a raw value. A future dark mode redefines this * layer only; the raw layer is theme-agnostic. * * See docs/theming.md (v1.5.0 Phase 7) for the indirection contract. * * Last extracted: 2026-04-25; v1.5.0 token contract: 2026-05-15. */ :root { /* ╔══════════════════════════════════════════════════════════════════╗ ║ LAYER 1 — RAW PALETTE ║ ║ Brand hues, neutrals, raw hex / rgba values. Theme-agnostic. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Brand Palette ─────────────────────────────────────────────── */ --navy: #0d3b66; /* Primary brand — nav, headings, CTA bg */ --amber: #e2c547; /* Accent — badges, highlights, star icons */ --warm: #f4a261; /* Warm orange — .btn--orange, warm accents */ --sky: #82cffd; /* Sky blue — footer bg, .badge--sky */ --teal: #2ec4b6; /* Teal — .btn--teal, .badge--teal */ --sage: #85bb65; /* Sage green — .badge--green, .reflection */ --rust: #e76f51; /* Rust/coral — warning tones */ /* ── Neutral Scale ─────────────────────────────────────────────── */ --ink: #111111; /* Body text */ --graphite: #333333; /* Secondary text */ --slate: #3f5368; /* Muted text, captions */ --mist: #eaf1f7; /* Light background, section fills */ --light: #c9d8e7; /* Borders, dividers */ --white: #ffffff; /* ── Raw Brand Variants (used by hover + accessible-text + dark-tints) ── */ --navy-hover-raw: #0a2f54; /* Darkened navy for .btn--navy:hover */ --cta-blue-hover-raw: #1d4fd8; /* Darkened cta-blue for .cta-btn:hover */ --hero-gradient-mid-raw: #1a5a9a; /* Hero gradient midpoint, navy → mid → end */ --path-cream-raw: #fffaf0; /* Cream wash for .path-card--current gradient*/ /* ── Raw Brand-Hue Text (callout / action / reflection / research / status) ── */ --callout-text-raw: #856d10; /* Yellow-amber text on soft-amber callout bg */ --action-text-raw: #a0531e; /* Warm-orange text on warm soft bg */ --reflection-text-raw: #3d6b20; /* Deep-sage text on sage-soft bg */ --rust-text-raw: #9a3a20; /* Deep-rust text on rust-soft bg */ --research-border-raw: #6366f1; /* Indigo border for .research-box */ --research-text-raw: #4338ca; /* Deep-indigo text for .research-box title */ --success-text-raw: #0e6258; /* Deep-teal success text — 6.58:1 on --tint-teal-soft, 7.22:1 on white. Darkened from pre-v1.5.0 #1a8a80 (3.83:1 on tint — WCAG AA FAIL) by the v1.5.0 contrast-review.md v1.2 audit. */ --danger-text-raw: #c0392b; /* Deep-red text for form-message error. 4.81:1 on --tint-rust-soft, 5.44:1 on white, 5.09:1 on body bg. Verified PASS by v1.5.0 audit. */ /* ── Raw Code-Block Surface ─────────────────────────────────────── */ --code-bg-raw: #1e293b; /* Dark slate for .code-block surface */ --code-text-raw: #e2e8f0; /* Light slate for .code-block body text */ --code-muted-raw: #cbd5e1; /* Mid slate for .code-block muted text. Brightened from pre-v1.6.0 #94a3b8 (3.90:1 on the composite overlay of .code-label / .copy-btn — WCAG AA FAIL) per the v1.6.0 post-Phase-5 audit pass. New value reaches 6.73:1 on the same composite. The body-text --code-text token is unchanged at #e2e8f0 (12.95:1 on --code-bg). */ /* ── Accessible Text Variants (WCAG AA on light backgrounds) ───── */ /* Use these when the brand color must read AS TEXT on a light surface. The base brand tokens (--teal, --warm, --sage, --amber, --rust) are intentionally bright for use as backgrounds and large-format accents, and FAIL WCAG AA when used as 4.5:1-required body text. */ --teal-text: #117a6f; /* Darkened teal — 5.20:1 on white */ --rust-dark: #c14b2e; /* Darkened rust — 4.87:1 vs white text */ --amber-text: #92400e; /* Darkened amber — 6.45:1 on bg-amber-soft */ --warm-hover: #d18548; /* Orange hover — keeps navy-text AA-large */ --teal-hover: #25a99e; /* Teal hover — preserves white-on-teal-dark */ --sage-hover: #6fa052; /* Sage hover */ /* ── Semantic Status (raw) ──────────────────────────────────────── */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --red: #ef4444; /* Alias used in portal */ /* ── Extended Brand (Portal) ────────────────────────────────────── */ --navy-light: #1a4f80; --teal-light: #5dd9cd; --coral: #e76f51; /* Alias of --rust for portal layer */ /* ── Raw rgba tints — brand hue × opacity ───────────────────────── */ /* Brand-tinted surfaces, borders, and accents that overlay white. Named by hue + role (soft / border / faint / mid / strong) so a sweep can find them. Used by .note, .proof-strip, .callout-box, .action-box, .reflection-box, .permission-card, .scenario, .research-box, etc. */ --tint-teal-soft: rgba(46,196,182,0.12); --tint-teal-border: rgba(46,196,182,0.30); --tint-teal-strong: rgba(46,196,182,0.18); --tint-amber-soft: rgba(226,197,71,0.12); --tint-warm-soft: rgba(244,162,97,0.12); --tint-rust-soft: rgba(231,111,81,0.12); --tint-rust-border: rgba(231,111,81,0.30); --tint-rust-faint: rgba(231,111,81,0.04); --tint-sage-soft: rgba(133,187,101,0.12); --tint-sage-faint: rgba(133,187,101,0.06); --tint-sage-mid: rgba(133,187,101,0.10); --tint-sky-soft: rgba(130,207,253,0.15); --tint-purple-soft: rgba(99,102,241,0.08); /* ── Raw rgba tints — navy × opacity (shadows + dark-on-light) ──── */ --shadow-tint-navy-faint: rgba(13,59,102,0.06); --shadow-tint-navy: rgba(13,59,102,0.07); --shadow-tint-navy-mid: rgba(13,59,102,0.12); --shadow-tint-navy-soft: rgba(13,59,102,0.20); /* ── Raw rgba — white overlays (transparent white on dark surfaces) ── */ --overlay-white-strong: rgba(255,255,255,0.50); --overlay-white-text: rgba(255,255,255,0.80); --overlay-white-text-soft: rgba(255,255,255,0.85); --overlay-white-glow: rgba(255,255,255,0.70); --overlay-white-mid: rgba(255,255,255,0.20); --overlay-white-soft: rgba(255,255,255,0.15); --overlay-white-faint: rgba(255,255,255,0.12); --overlay-white-trace: rgba(255,255,255,0.10); /* ── Raw rgba — cta-blue (shadow + focus ring) ──────────────────── */ --cta-blue-shadow: rgba(37,99,235,0.35); --focus-ring-tint-blue: rgba(37,99,235,0.40); /* ── Raw rgba — danger focus tint (state architecture) ──────────── */ /* v1.5.0 Phase 4: invalid-field focus ring. Mirrors --focus-ring-tint-blue opacity so the visual weight matches the standard focus ring. */ --focus-ring-tint-danger: rgba(239,68,68,0.40); /* ── Layout ─────────────────────────────────────────────────────── */ --maxw: 1120px; /* Site content max-width */ --essay-maxw: 38rem; /* Long-form reading column (~608px / 60ch) */ --radius: 14px; /* Default border-radius */ --radius-lg: 14px; /* Large radius (same as default) */ --radius-sm: 6px; /* Small radius */ /* ── Soft tinted surfaces (long-form, qualification, banners) ────── */ /* Each is a near-white wash that keeps body text contrast trivial */ /* (≥17:1 on --ink) but signals intent at a glance. */ --rule-color: #d4dde7; /* Hairline separators, subtle dividers */ --bg-amber-soft: #fff8e1; /* Founding banner / legal-ack bg */ --bg-amber-faint: #fffdf6; /* Near-white amber wash — artifact-card--accent gradient */ --bg-sage-soft: #ecf6e2; /* "Yes / Perfect Fit" qualification */ --bg-rust-soft: #fdece7; /* "No / Not a Fit" qualification */ --bg-sky-soft: #f3f9ff; /* Scenario / future-state narrative bg */ /* ── Spacing (8-px grid) ────────────────────────────────────────── */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 3rem; /* 48px */ --space-6: 4rem; /* 64px */ /* ── Shadows (navy-tinted) ──────────────────────────────────────── */ --shadow-1: 0 2px 10px var(--shadow-tint-navy-faint); --shadow-2: 0 10px 26px var(--shadow-tint-navy-mid); --shadow-3: 0 12px 30px rgba(13,59,102,0.15); /* ── Portal Shadow Scale (neutral, mapped alongside brand shadows) ─ */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05); /* ── Focus ─────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(130,207,253,0.55); --focus-ring-color: #0b5fff; /* ── Typography ─────────────────────────────────────────────────── */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; --text-base: 1.125rem; /* 18px */ --line-height: 1.7; /* Fluid heading scale using clamp() */ --text-h1: clamp(2rem, 4.6vw, 3.2rem); --text-h2: clamp(1.6rem, 3.4vw, 2.2rem); --text-h3: clamp(1.15rem,2.6vw, 1.35rem); --text-h4: 1.1rem; --weight-heading: 800; --weight-subhead: 700; --weight-semi: 600; --weight-normal: 400; /* ── Easing curves (v1.5.0 Phase 5) ─────────────────────────────── */ /* Three named curves. Pick by intent: */ /* ease-out — enter, hover, micro-interaction (default) */ /* ease-in-out — layout shift, modal open */ /* ease-snap — decisive feedback (button press release) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-snap: cubic-bezier(0.4, 0, 0, 1.2); /* ── Transitions ─────────────────────────────────────────────────── */ /* Built on top of the easing curves above. The duration scale */ /* (fast / normal / slow) is the v1.0 contract — only the bare */ /* `ease` keyword was replaced by --ease-out in v1.5.0 so every */ /* motion is now named. */ --transition-fast: 150ms var(--ease-out); --transition-normal: 200ms var(--ease-out); --transition-slow: 300ms var(--ease-out); /* ── Hover lift (v1.5.0 Phase 5) ─────────────────────────────────── */ /* Canonical hover translate. v1.4.0 and earlier shipped two ad-hoc */ /* values (-2px on .post-card:hover, -1px on .cta-btn:hover); these */ /* are consolidated to -2px in v1.5.0. Visual change on .cta-btn is */ /* intentional per the maturity audit. */ --lift-hover: -2px; /* ╔══════════════════════════════════════════════════════════════════╗ ║ LAYER 2 — SEMANTIC ║ ║ Tokens consumed by components. Each resolves to a raw value via ║ ║ var(). A theme override redefines this layer only. ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* ── Semantic / Named Surfaces ─────────────────────────────────── */ --bg-body: #f1faee; /* Site body background (off-white green) */ --bg-light: #f8f9fa; /* Portal / card light surface */ --link-color: #0a2a45; /* Body link color */ --sales-text: #1a1a2e; /* Sales page body text (slightly bluer) */ --cta-blue: #2563eb; /* Sales / academy CTA button blue */ /* ── Semantic — brand hover / gradient ─────────────────────────── */ --navy-hover: var(--navy-hover-raw); --cta-blue-hover: var(--cta-blue-hover-raw); --gradient-hero-mid: var(--hero-gradient-mid-raw); --path-cream: var(--path-cream-raw); /* ── Semantic — brand-hue text on light surfaces ───────────────── */ --callout-text: var(--callout-text-raw); --action-text: var(--action-text-raw); --reflection-text: var(--reflection-text-raw); --rust-text: var(--rust-text-raw); --research-text: var(--research-text-raw); --research-border: var(--research-border-raw); --success-text: var(--success-text-raw); --danger-text: var(--danger-text-raw); /* ── Semantic — code-block surface ─────────────────────────────── */ --code-bg: var(--code-bg-raw); --code-text: var(--code-text-raw); --code-muted: var(--code-muted-raw); /* ── Semantic intermediaries (text + surface + border) ─────────── */ /* New in v1.5.0. Components reach for these instead of brand names. */ /* Full per-component migration is OUT OF SCOPE for v1.5.0 (large blast radius); v1.5.0 ships the tokens and a migration contract. Phase 2 migrates the Phase 2 sweep targets only. */ --text-primary: var(--ink); /* Body, headings on light surfaces */ --text-secondary: var(--graphite); /* Captions, secondary copy */ --text-muted: var(--slate); /* Hint text, meta */ --surface-default: var(--white); --surface-emphasis: var(--bg-body); /* Site body / emphasized surface */ --surface-soft: var(--bg-light); /* Cards, portal surfaces */ --border-subtle: var(--rule-color); --border-strong: var(--light); /* ── Semantic — z-index scale ──────────────────────────────────── */ /* Replaces ad-hoc values (was: .nav 100, .skip-link 9999). */ --z-base: 0; --z-sticky: 50; --z-nav: 100; --z-dropdown: 200; --z-tooltip: 700; /* v1.6.0 Phase 3: above dropdown, below overlay. */ --z-overlay: 900; /* v1.6.0 Phase 3: page-level overlay below modal. */ --z-modal: 1000; --z-toast: 1100; --z-skip-link: 9999; /* ── Semantic — breakpoint scale (documentation only) ──────────── */ /* @media queries cannot consume CSS custom properties. These tokens */ /* document the canonical breakpoints and serve as the audit aid for */ /* any pre-tokenization sweep; component @media values still match. */ --bp-sm: 600px; --bp-md: 768px; --bp-lg: 960px; --bp-xl: 1200px; /* ── Fluid spacing (v1.6.0 Phase 4) ─────────────────────────────── */ /* Three clamp() spacing tokens for components that should breathe */ /* with viewport width. The fixed --space-* scale is the default; */ /* --space-fluid-* is opt-in for component padding / section gaps */ /* where the per-viewport size should grow smoothly. Worked example */ /* in v1.6.0: .section uses --space-fluid-md for block padding. */ /* Full migration of components onto --space-fluid-* is v1.7.0+. */ --space-fluid-sm: clamp(0.5rem, 1.5vw, 1rem); --space-fluid-md: clamp(1rem, 3vw, 2rem); --space-fluid-lg: clamp(1.5rem, 5vw, 3rem); } /* ────────────────────────────────────────────────────────────────────── Theme indirection scaffold — v1.5.0 Phase 7 lights this up. Activate a theme by setting [data-theme="dark"] on ; only the semantic layer above gets redefined. The raw palette is theme-agnostic. Example (commented out — no dark theme ships in v1.5.0): [data-theme="dark"] { --bg-body: #0e1620; --text-primary: #e6edf3; --text-secondary: #b1bac4; --surface-default: #16202c; --surface-emphasis:#0e1620; --surface-soft: #1c2735; --border-subtle: #2b3a4a; --border-strong: #3a4d63; } See docs/theming.md for the full contract. ────────────────────────────────────────────────────────────────────── */