/* ========================================================================= Carcin shared design tokens ------------------------------------------------------------------------- Source of truth for typography, easings, radii, and the 6 brand colorways. Import in any page that wants the unified vocabulary: Sets the dawn colorway by default on :root. Swap by adding one of .void / .cosmos / .eclipse / .lab / .glacier to . Derived tokens (--card, --border, --muted-foreground, etc.) are computed via color-mix() from the 5 brand anchors so every colorway auto-resolves a consistent palette without per-colorway tables. Lab and glacier are LIGHT colorways. They flip color-scheme and need the .lab/.glacier shadow recipe defined in the consuming stylesheet (see onboard.css). Pages that don't use the light colorways can ignore that. NAMESPACE NOTE · do NOT import this on the carcin.ai homepage (index.html) or the legacy /chat page. Both of those load brand.css which defines its own --border / --text / --accent tokens with different values for the cosmic-dark visual identity. Importing here would cascade-clobber their look. A future site-wide token unification would consolidate brand.css into this file; until then, this file is safe ONLY on /onboard/ + new surfaces with no existing token system. ========================================================================= */ /* Font families · loaded once at the top of every page that imports this. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* === BRAND COLORWAYS (5 anchors each) === */ :root, .dawn { --brand-bg: #1a0f08; --brand-surface: #2d1b0e; --brand-fg: #fff5e6; --brand-accent: #f59e0b; --brand-primary-fg: #1a0f08; } .void { --brand-bg: #0d0a14; --brand-surface: #1c1326; --brand-fg: #f5f0ff; --brand-accent: #a855f7; --brand-primary-fg: #0d0a14; } .cosmos { --brand-bg: #08101d; --brand-surface: #102135; --brand-fg: #e6f0ff; --brand-accent: #3b82f6; --brand-primary-fg: #08101d; } .eclipse { --brand-bg: #14080a; --brand-surface: #2a0e12; --brand-fg: #ffe6e8; --brand-accent: #ef4444; --brand-primary-fg: #14080a; } .lab { --brand-bg: #faf7ff; --brand-surface: #ffffff; --brand-fg: #2a1f3a; --brand-accent: #8b5cf6; --brand-primary-fg: #ffffff; color-scheme: light; } .glacier { --brand-bg: #f0f7ff; --brand-surface: #ffffff; --brand-fg: #0c1e3a; --brand-accent: #0ea5e9; --brand-primary-fg: #ffffff; color-scheme: light; } /* === DERIVED TOKENS (via color-mix on the anchors) === Mirrors Bryan's recipe at globals.css L118-179. Same names as shadcn so any shadcn-compatible component renders correctly. */ :root { /* Radius scale */ --radius: 0.625rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Semantic surfaces */ --background: var(--brand-bg); --foreground: var(--brand-fg); --card: var(--brand-surface); --card-foreground: var(--brand-fg); --popover: var(--brand-surface); --primary: var(--brand-accent); --primary-foreground: var(--brand-primary-fg); --secondary: color-mix(in srgb, var(--brand-fg) 8%, var(--brand-surface)); --secondary-foreground: color-mix(in srgb, var(--brand-fg) 74%, var(--brand-bg)); --muted: color-mix(in srgb, var(--brand-fg) 5%, var(--brand-bg)); --muted-foreground: color-mix(in srgb, var(--brand-fg) 54%, var(--brand-bg)); --accent: color-mix(in srgb, var(--brand-fg) 10%, var(--brand-surface)); --accent-foreground: var(--brand-fg); --destructive: #ef4444; --border: color-mix(in srgb, var(--brand-fg) 13%, var(--brand-bg)); --input: color-mix(in srgb, var(--brand-fg) 15%, var(--brand-bg)); --ring: var(--brand-accent); /* Sidebar / left-rail surfaces (shadcn convention) */ --sidebar: var(--brand-surface); --sidebar-foreground: color-mix(in srgb, var(--brand-fg) 87%, var(--brand-bg)); --sidebar-primary: var(--brand-fg); --sidebar-primary-foreground: var(--brand-bg); --sidebar-accent: color-mix(in srgb, var(--brand-fg) 8%, transparent); --sidebar-accent-foreground: var(--brand-fg); --sidebar-border: color-mix(in srgb, var(--brand-fg) 8%, var(--brand-surface)); /* Easings · 3 named curves used across every animation. */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); } /* === FONT STACKS (referenced by pages that want defaults) === */ :root { --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }