/* * ChatCYA Design System — Tokens * Linen (light, canonical default) + Lex & Gold (dark, [data-theme="dark"]) * * Updated: May 2026 * Source-of-truth: ~/.claude/plans/plan-the-implementation-polished-karp.md * * ───────────────────────────────────────────────────────────────── * ELEVATION MODEL — Tonal layering. No drop shadows on UI chrome. * * L4 · Overlay — slide-overs, modals, inspectors * L3 · Chrome — toolbars, table headers, tab bars * L2 · Rail — sidebars, top nav * L2 · Card — content containers * L1 · Canvas — primary workspace background * L0 · Well — recessed surfaces (alt rows, inset metadata) * * Shadow exceptions (strictly limited): * · Modals 0 20px 40px rgba(0,0,0,0.12) * · Slide-overs -4px 0 16px rgba(0,0,0,0.06) * · Dropdowns 0 6px 20px rgba(0,0,0,0.10) * * ───────────────────────────────────────────────────────────────── * SURFACE OWNERSHIP (locked — see master plan) * * --surface-page app/workspace background only * --surface-rail sidebars and top chrome only * --surface-card primary operational containers * --surface-chrome toolbars / table headers / tab bars / filter strips * --surface-well recessed grouping (alt rows, inset metadata) * --surface-overlay modal + slide-over bodies only * --surface-active active selected background (under gold tint) * --surface-selected gold-tinted selected-row tint * --surface-hover row hover state * * ───────────────────────────────────────────────────────────────── * MOTION INVARIANTS (locked) * * No animations on operational data surfaces: tables, review queue, * audit logs, bulk toolbars. Allowed: dropdowns, modals (scrim fade), * slide-overs (200ms translateX, no spring), theme toggle (subtle fade). * * ───────────────────────────────────────────────────────────────── * IDENTITY VS ACTION (locked) * * Gold (--gold) is identity + importance only: brand mark, privilege * stamps, VIP, FOLIO tags, production-set chips. * Action (--action-primary) is navy in light, gold in dark — semantic, * not literal. Buttons/links/nav indicators always use --action-primary. */ /* ═══════════════════════════════════════════════════════════════ SELF-HOSTED FONTS ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Libre Caslon Text'; src: url('/static/fonts/LibreCaslonText-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Libre Caslon Text'; src: url('/static/fonts/LibreCaslonText-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Libre Caslon Text'; src: url('/static/fonts/LibreCaslonText-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('/static/fonts/WorkSans-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ═══════════════════════════════════════════════════════════════ LINEN — RAW PALETTE (light, canonical default) Source-of-truth hex values. Semantic tokens point here. Components reference semantic tokens only. ═══════════════════════════════════════════════════════════════ */ :root { /* Surface scale */ --linen-l0-well: #EFECEA; --linen-l1-canvas: #F7F5F0; --linen-l2-card: #FFFFFF; --linen-l2-rail: #E7E3DC; --linen-l3-chrome: #DDD9D0; --linen-l3-active: #D4CFC6; --linen-l4-overlay: #FFFFFF; /* Borders */ --linen-border-subtle: #D4CEC8; --linen-border-strong: #C4BEB8; --linen-border-focus: #0C1A26; /* Text */ --linen-text-primary: #0C1A26; --linen-text-secondary: #385060; --linen-text-muted: #6E8494; --linen-text-disabled: #9EB5C2; /* Gold — identity + importance */ --linen-gold: #C5B358; --linen-gold-text: #9A8830; --linen-gold-bg: rgba(197,179,88,0.09); --linen-gold-border: rgba(154,136,48,0.45); --linen-gold-selected: rgba(197,179,88,0.07); /* Action — navy in light mode (NOT gold) */ --linen-action: #0C1A26; --linen-action-on: #F7F5F0; --linen-action-hover: #1E3448; --linen-action-ghost: rgba(12,26,38,0.06); --linen-action-border: #0C1A26; /* States */ --linen-identified-text: #1A6828; --linen-identified-bg: rgba(26,104,40,0.08); --linen-identified-border: #68A070; --linen-bucketed-text: #385060; --linen-bucketed-bg: #DDD9D0; --linen-bucketed-border: #C4BEB8; --linen-flagged-text: #A02020; --linen-flagged-bg: rgba(160,32,32,0.08); --linen-flagged-border: #CC8080; --linen-warning-text: #8A6010; --linen-warning-bg: rgba(180,130,10,0.08); --linen-warning-border: #C0A020; --linen-cleared-text: #1A6828; --linen-cleared-bg: rgba(26,104,40,0.08); --linen-cleared-border: #68A070; --linen-pending-text: #6E8494; --linen-pending-bg: transparent; --linen-pending-border: #D4CEC8; /* Logo (brand) — "CHAT" wordmark color. Slightly darker than --text-secondary in light mode so the wordmark survives on the low-contrast --surface-rail and on lower-brightness office displays. "CYA" always uses --gold-text. Shield mark always uses literal gold. */ --linen-logo-chat: #314756; /* Overlay chrome */ --linen-scrim: rgba(12,26,38,0.35); --linen-shadow-modal: 0 20px 40px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); --linen-shadow-slideover: -4px 0 16px rgba(0,0,0,0.06); --linen-shadow-dropdown: 0 6px 20px rgba(0,0,0,0.10); } /* ═══════════════════════════════════════════════════════════════ SEMANTIC TOKENS — Components reference ONLY these names. Never raw hex. Never raw --linen-* outside this file. ═══════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --surface-page: var(--linen-l1-canvas); --surface-well: var(--linen-l0-well); --surface-card: var(--linen-l2-card); --surface-rail: var(--linen-l2-rail); --surface-chrome: var(--linen-l3-chrome); --surface-active: var(--linen-l3-active); --surface-overlay: var(--linen-l4-overlay); --surface-hover: var(--linen-l0-well); --surface-selected: var(--linen-gold-selected); /* Borders */ --border-subtle: var(--linen-border-subtle); --border-strong: var(--linen-border-strong); --border-focus: var(--linen-border-focus); /* Text */ --text-primary: var(--linen-text-primary); --text-secondary: var(--linen-text-secondary); --text-muted: var(--linen-text-muted); --text-disabled: var(--linen-text-disabled); --text-operational: var(--linen-text-primary); /* Gold (identity + importance only) */ --gold: var(--linen-gold); --gold-text: var(--linen-gold-text); --gold-bg: var(--linen-gold-bg); --gold-border: var(--linen-gold-border); /* Actions */ --action-primary: var(--linen-action); --action-primary-on: var(--linen-action-on); --action-primary-hover: var(--linen-action-hover); --action-ghost: var(--linen-action-ghost); --action-border: var(--linen-action-border); /* States */ --state-identified-text: var(--linen-identified-text); --state-identified-bg: var(--linen-identified-bg); --state-identified-border: var(--linen-identified-border); --state-bucketed-text: var(--linen-bucketed-text); --state-bucketed-bg: var(--linen-bucketed-bg); --state-bucketed-border: var(--linen-bucketed-border); --state-flagged-text: var(--linen-flagged-text); --state-flagged-bg: var(--linen-flagged-bg); --state-flagged-border: var(--linen-flagged-border); --state-warning-text: var(--linen-warning-text); --state-warning-bg: var(--linen-warning-bg); --state-warning-border: var(--linen-warning-border); --state-cleared-text: var(--linen-cleared-text); --state-cleared-bg: var(--linen-cleared-bg); --state-cleared-border: var(--linen-cleared-border); --state-pending-text: var(--linen-pending-text); --state-pending-bg: var(--linen-pending-bg); --state-pending-border: var(--linen-pending-border); /* Overlays */ --scrim: var(--linen-scrim); --shadow-modal: var(--linen-shadow-modal); --shadow-slideover: var(--linen-shadow-slideover); --shadow-dropdown: var(--linen-shadow-dropdown); /* Brand */ --logo-chat-text: var(--linen-logo-chat); } /* ═══════════════════════════════════════════════════════════════ BRAND LOGO — CSS hooks for the shared horizontal logo SVG. The shield mark stays literal gold (it IS the brand mark). The wordmark splits per the identity/structure model: - "CHAT" = supportive structure → --logo-chat-text - "CYA" = identity / accent → --gold-text ═══════════════════════════════════════════════════════════════ */ .logo-text-chat { fill: var(--logo-chat-text); } .logo-text-cya { fill: var(--gold-text); } /* ═══════════════════════════════════════════════════════════════ DENSITY + SPACING + RADIUS + TYPOGRAPHY (theme-agnostic) ═══════════════════════════════════════════════════════════════ */ :root { /* Density — operational invariants. Capped values; do not exceed. */ --density-row: 37px; --density-row-header: 32px; --density-toolbar: 46px; --density-input: 34px; --density-chip: 20px; --density-slideover-w: 380px; /* Spacing (8px base) */ --space-unit: 8px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --container-max: 1280px; --gutter: 24px; --margin-mobile: 16px; --margin-desktop: 48px; /* Border radius — never exceed 8px on data containers */ --radius-sm: 0.125rem; /* 2px */ --radius-default: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px — non-data containers only */ --radius-full: 9999px; /* state chips only */ /* Typography */ --font-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; --font-sans: 'Work Sans', system-ui, -apple-system, sans-serif; --font-mono: 'Courier New', Courier, monospace; --type-display-size: 48px; --type-display-weight: 700; --type-display-line: 1.2; --type-display-spacing: -0.02em; --type-headline-lg-size: 32px; --type-headline-lg-weight: 600; --type-headline-lg-line: 1.3; --type-headline-md-size: 24px; --type-headline-md-weight: 500; --type-headline-md-line: 1.4; --type-body-lg-size: 18px; --type-body-lg-weight: 400; --type-body-lg-line: 1.6; --type-body-md-size: 16px; --type-body-md-weight: 400; --type-body-md-line: 1.6; --type-label-md-size: 14px; --type-label-md-weight: 600; --type-label-md-line: 1.2; --type-label-md-spacing: 0.05em; --type-label-sm-size: 12px; --type-label-sm-weight: 500; --type-label-sm-line: 1.2; /* Motion */ --transition: all 0.2s ease; --transition-slow: all 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ [data-theme="dark"] — ChatCYA Lex & Gold (current dark palette) Preserves byte-for-byte the values used on main today. ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Surfaces */ --surface-page: #091422; --surface-well: #050E1D; --surface-card: #121C2A; --surface-rail: #1E293B; --surface-chrome: #253345; --surface-active: #303A49; --surface-overlay: #121C2A; --surface-hover: #1E293B; --surface-selected: rgba(197,179,88,0.06); /* Borders */ --border-subtle: #1A2535; --border-strong: #2D3D52; --border-focus: #C5B358; /* Text */ --text-primary: #E1E2E4; --text-secondary: #8A9AB0; --text-muted: #4A5E72; --text-disabled: #2D3D52; --text-operational: #E1E2E4; /* Gold (identity + importance) — same hex in dark */ --gold: #C5B358; --gold-text: #C5B358; --gold-bg: rgba(197,179,88,0.09); --gold-border: rgba(197,179,88,0.35); /* Action — gold in dark mode (the key semantic that flips per theme) */ --action-primary: #C5B358; --action-primary-on: #091422; --action-primary-hover: #D4C469; --action-ghost: rgba(197,179,88,0.07); --action-border: #1A2535; /* States */ --state-identified-text: #6db872; --state-identified-bg: rgba(61,107,64,0.12); --state-identified-border: #3d6b40; --state-bucketed-text: #8A9AB0; --state-bucketed-bg: transparent; --state-bucketed-border: #2D3D52; --state-flagged-text: #ffb4ab; --state-flagged-bg: rgba(147,0,10,0.15); --state-flagged-border: #93000a; --state-warning-text: #C5B358; --state-warning-bg: rgba(197,179,88,0.08); --state-warning-border: #8A7A32; --state-cleared-text: #6db872; --state-cleared-bg: rgba(61,107,64,0.12); --state-cleared-border: #3d6b40; --state-pending-text: #4A5E72; --state-pending-bg: transparent; --state-pending-border: #1A2535; /* Overlays */ --scrim: rgba(0,0,0,0.55); --shadow-modal: 0 24px 48px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.30); --shadow-slideover: none; --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.40); /* Brand — full primary text in dark mode (preserves current look) */ --logo-chat-text: #E1E2E4; }