/* * ============================================================ * ALGPT DESIGN TOKENS — Single source of truth * /static/css/tokens.css * * HOW TO USE * ---------- * 1. Import this file first in every HTML page: * * 2. Remove any local :root { ... } block that duplicates these tokens. * 3. Reference tokens with var(--token-name) everywhere in CSS. * * SECTIONS * -------- * A. Backgrounds & Surfaces * B. Text Hierarchy * C. Gold Accent System ← read the rules carefully * D. Semantic Colors (success / warning / danger / info) * E. Interactive / Active State * F. Borders * G. Shadows & Glows * H. Typography * I. Font Scale * J. Line Heights * K. Layout & Spacing * L. Transitions * ============================================================ */ :root { /* ---------------------------------------------------------- * A. Backgrounds & Surfaces * * Use in order of depth: bg → surface → surface2 → surface3 * bg-input is for form controls only. * ---------------------------------------------------------- */ --bg: #050608; /* page background (deepest) */ --surface: #0b0e12; /* card / panel background */ --surface2: #0f141b; /* nested card, sidebar item hover */ --surface3: #141a25; /* tooltip, popover, dropdown */ --bg-input: #0a0d12; /* text inputs, selects, textareas */ /* ---------------------------------------------------------- * B. Text Hierarchy * * Five levels — do not skip levels. * --text → primary readable content * --text-dim → supporting labels, secondary values * --muted → timestamps, placeholders, helper text * --text-disabled→ disabled controls * --text-inverse → text on bright/gold backgrounds * ---------------------------------------------------------- */ --text: #eef2ff; --text-dim: #c9d4df; --muted: #a6b3c2; --text-disabled: #5a6478; --text-inverse: #0d0e10; /* use on --gold buttons */ /* ---------------------------------------------------------- * C. Gold Accent System * * RULE 1 — Font color: always --gold-text (#e6c965) * Never use --gold (#d4af37) as a font color. It * lacks contrast on dark backgrounds. * * RULE 2 — Decorative (borders, backgrounds, gradients, * shadows): use --gold, --gold-dark, or * --gold-gradient. * * RULE 3 — Subtle fills / glows: use --gold-soft. * * RULE 4 — Do not add new gold variables; adapt these. * ---------------------------------------------------------- */ --gold: #d4af37; /* borders, decorative backgrounds */ --gold-text: #e6c965; /* ALL gold-colored text — only this */ --gold-light: #fcf6ba; /* highlights, hover text tints */ --gold-dark: #b38728; /* pressed states, shadows */ --gold-soft: rgba(212, 175, 55, 0.12); /* subtle fills, row highlights */ --gold-border: rgba(212, 175, 55, 0.30); /* standard gold border */ --gold-border-strong: rgba(212, 175, 55, 0.60); /* focused / active border */ --gold-gradient: linear-gradient(135deg, #b38728 0%, #fcf6ba 45%, #d4af37 55%, #aa771c 100%); --gold-gradient-btn: linear-gradient(135deg, #D4AF37, #F5D76E, #C9A227); /* ---------------------------------------------------------- * D. Semantic Colors * * Use ONLY for status feedback — never as decoration. * success → positive outcome, completed, live * warn → caution, pending, rate-limit * danger → error, blocked, destructive action * info → informational, neutral highlight * ---------------------------------------------------------- */ --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.12); --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, 0.12); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.12); --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.12); /* ---------------------------------------------------------- * E. Interactive / Active State * * Applied on selected tabs, active nav items, focused rows. * ---------------------------------------------------------- */ --active-bg: rgba(56, 189, 248, 0.10); --active-border: rgba(56, 189, 248, 0.35); --active-text: #7dd3fc; /* ---------------------------------------------------------- * F. Borders * * --border → standard divider between panels * --border-light → subtler divider inside a panel * ---------------------------------------------------------- */ --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.04); --radius: 12px; /* cards, modals, panels */ --radius-sm: 8px; /* buttons, inputs */ --radius-xs: 4px; /* badges, tags */ /* ---------------------------------------------------------- * G. Shadows & Glows * * Combine: box-shadow: var(--shadow-soft), var(--glow-gold); * ---------------------------------------------------------- */ --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.50); --shadow-raised: 0 20px 40px rgba(0, 0, 0, 0.70); --glow-gold: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 10px 35px rgba(212, 175, 55, 0.08); --glow-mint: 0 0 0 1px rgba(66, 245, 196, 0.18), 0 10px 35px rgba(66, 245, 196, 0.06); --glow-info: 0 0 0 1px rgba(56, 189, 248, 0.20), 0 10px 35px rgba(56, 189, 248, 0.06); /* ---------------------------------------------------------- * H. Typography * * Two families: * --font-sans → all body and UI text * --font-mono → code, URLs, IDs, tokens * * Always load Inter via Google Fonts on every page: * * * ---------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* ---------------------------------------------------------- * I. Font Scale * * Hierarchy (from smallest to largest): * xs → badges, timestamps, compact metadata * sm → dense captions, table secondary cells * base → body text, labels, default inputs * md → emphasized body, important labels * lg → subtitles, panel body copy * xl → section headings * 2xl → panel / card titles * 3xl → KPIs, stat numbers * 4xl → hero KPIs, page-level numbers * ---------------------------------------------------------- */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 32px; /* ---------------------------------------------------------- * J. Line Heights * * --lh-tight → headings, single-line labels * --lh-base → body paragraphs * --lh-loose → help text, multi-line descriptions * ---------------------------------------------------------- */ --lh-tight: 1.25; --lh-base: 1.60; --lh-loose: 1.85; /* ---------------------------------------------------------- * K. Layout & Spacing * * Structural dimensions for the main shell. * Utility spacing scale (4px base grid). * ---------------------------------------------------------- */ /* Shell */ --sidebar-width: 260px; --header-height: 64px; --drawer-width: 380px; /* 4px grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------------------------------------------------------- * L. Transitions * * Use --transition for most interactive elements. * Use --transition-slow for modals, drawers, panels. * ---------------------------------------------------------- */ --transition: 0.15s ease; --transition-slow: 0.30s ease; }