/* ═══════════════════════════════════════════════════════════════════════ 00-tokens.css — DESIGN TOKENS (single source of truth) Grow24 AI Dashboard Design System v1.0 ═══════════════════════════════════════════════════════════════════════ This file defines the DEFAULT (light premium professional) theme as the base :root token set. All other themes override these via body[data-theme] selectors in 10-themes.css. For designers / AI tools creating a new theme: 1. Do NOT edit this file unless adding a new token category. 2. Add your theme in 10-themes.css as body[data-theme="your-name"] {}. 3. Override only the tokens you want changed. 4. Unlisted tokens cascade from defaults here — zero surprises. For engineers: All component styles in 20-components.css consume ONLY var() references. Never hard-code hex/rgba in components — always reach for a token. ═══════════════════════════════════════════════════════════════════════ */ /* Cascade layer ordering — ensures predictable specificity */ @layer tokens, themes, reset, components, utilities, states, animations, overrides, mobile-responsive; @layer tokens { :root { /* ───────────────────────────────────────────────────────────────── COLOR — Surfaces (page/card/section/overlay/input backgrounds) ───────────────────────────────────────────────────────────────── */ --color-bg: #F8FAFC; /* page body */ --color-bg-alt: #F1F5F9; /* striped / alt rows */ --color-surface-card: #FFFFFF; /* standard card */ --color-surface-card-hover: #FAFBFC; /* card hover */ --color-surface-section: #FFFFFF; /* form section */ --color-surface-elevated: #FFFFFF; /* modal / popover */ --color-surface-overlay: rgba(15, 23, 42, 0.55); /* modal backdrop */ --color-surface-input: #FFFFFF; /* input field bg */ --color-surface-input-hover: #F8FAFC; --color-surface-hover: rgba(15, 23, 42, 0.04); --color-surface-active: rgba(15, 23, 42, 0.08); --color-surface-disabled: #F1F5F9; /* ───────────────────────────────────────────────────────────────── COLOR — Text (heading/body/muted/dim/on-solid) ───────────────────────────────────────────────────────────────── */ --color-text-heading: #0F172A; /* h1-h3 / titles */ --color-text-body: #1E293B; /* main copy */ --color-text-muted: #64748B; /* secondary */ --color-text-dim: #94A3B8; /* tertiary / hints */ --color-text-soft: #CBD5E1; /* watermark / placeholder */ --color-text-brand: #4F46E5; /* brand accent text */ --color-text-on-solid: #FFFFFF; /* text on solid-colored buttons */ --color-text-on-brand: #FFFFFF; --color-text-link: #4F46E5; --color-text-link-hover: #4338CA; --color-text-disabled: #CBD5E1; /* ───────────────────────────────────────────────────────────────── COLOR — Brand / accent (primary action, links, focus rings) ───────────────────────────────────────────────────────────────── */ --color-brand: #4F46E5; /* indigo-600 — primary */ --color-brand-hover: #4338CA; /* indigo-700 */ --color-brand-active: #3730A3; /* indigo-800 */ --color-brand-soft: rgba(79, 70, 229, 0.10); --color-brand-soft-border: rgba(79, 70, 229, 0.24); --color-accent: #D97706; /* amber-600 — secondary accent */ --color-accent-soft: rgba(217, 119, 6, 0.10); /* Brand gradient — three-stop hero bar (indigo → violet → pink). Defined here as a single token so consumers use one variable instead of repeating bare hex in linear-gradient(...) fallback lists. */ --brand-gradient: linear-gradient(90deg, #4F46E5 0%, #7C3AED 45%, #EC4899 100%); /* ───────────────────────────────────────────────────────────────── COLOR — Semantic (success/warn/danger/info/neutral) Each category has: fg (text), bg (soft tint), border, solid (button bg) ───────────────────────────────────────────────────────────────── */ --color-success-fg: #047857; --color-success-bg: rgba(16, 185, 129, 0.10); --color-success-border: rgba(16, 185, 129, 0.32); --color-success-solid: #28a745; --color-success-solid-hover: #218838; --color-warn-fg: #B45309; --color-warn-bg: rgba(245, 158, 11, 0.10); --color-warn-border: rgba(245, 158, 11, 0.32); --color-warn-solid: #D97706; --color-warn-solid-hover: #B45309; --color-danger-fg: #B91C1C; --color-danger-bg: rgba(239, 68, 68, 0.10); --color-danger-border: rgba(239, 68, 68, 0.32); --color-danger-solid: #DC2626; --color-danger-solid-hover: #B91C1C; --color-info-fg: #0369A1; --color-info-bg: rgba(14, 165, 233, 0.10); --color-info-border: rgba(14, 165, 233, 0.32); --color-info-solid: #0284C7; --color-info-solid-hover: #0369A1; --color-neutral-fg: #475569; --color-neutral-bg: rgba(100, 116, 139, 0.08); --color-neutral-border: rgba(100, 116, 139, 0.24); --color-neutral-solid: #64748B; --color-neutral-solid-hover: #475569; /* ─── Channel-triple RGB tokens (Wave 9, 17 May 2026) ─────────────── For @keyframes that need rgba() with dynamic alpha (pulses, glows, focus rings). Lets CSS consume `rgba(var(--color-danger-rgb), 0.4)` instead of hardcoded `rgba(239, 68, 68, 0.4)`. Symmetric set — add the modifier you need, then call sites can retire raw rgba() in @keyframes (Bible §11 #9). 12+ blueprints have a `*-pulse` keyframe that benefits. ─────────────────────────────────────────────────────────────── */ --color-success-rgb: 16, 185, 129; /* emerald-500 */ --color-warn-rgb: 245, 158, 11; /* amber-500 */ --color-danger-rgb: 239, 68, 68; /* red-500 */ --color-info-rgb: 14, 165, 233; /* sky-500 */ --color-neutral-rgb: 100, 116, 139; /* slate-500 */ --color-brand-rgb: 79, 70, 229; /* indigo-600 */ /* Extended solid palette — accent action buttons (Rule 15: added 20 Apr 2026) */ --color-violet-solid: #7C3AED; /* violet-700 — special action buttons */ --color-violet-solid-hover: #6D28D9; /* violet-800 */ --color-cyan-solid: #0891B2; /* cyan-600 — upload/fetch action buttons */ --color-cyan-solid-hover: #0E7490; /* cyan-700 */ /* Soft gradient tokens — for blueprint surfaces that need a tinted callout / hover background. Themes can override; defaults derive from the semantic *-bg tokens above so they auto-recolor with the theme. Added 29 Apr 2026 (Mway BIGFIX 18 — H4) replacing hardcoded rgba() gradients in fba.css / training.css. */ --gradient-warn-soft: linear-gradient(135deg, var(--color-warn-bg), rgba(245, 158, 11, 0.02)); --gradient-info-soft: linear-gradient(135deg, var(--color-info-bg), var(--color-brand-soft)); --gradient-success-soft: linear-gradient(135deg, var(--color-success-bg), rgba(16, 185, 129, 0.02)); /* ───────────────────────────────────────────────────────────────── COLOR — Borders / dividers (separator lines) ───────────────────────────────────────────────────────────────── */ --color-border-default: #E2E8F0; /* standard card / input */ --color-border-subtle: #F1F5F9; /* dim dividers */ --color-border-strong: #CBD5E1; /* emphasized */ --color-border-input: #D1D5DB; --color-border-input-hover: #94A3B8; --color-border-input-focus: var(--color-brand); --color-border-accent: var(--color-brand); /* ───────────────────────────────────────────────────────────────── COLOR — Focus ring (accessibility) ───────────────────────────────────────────────────────────────── */ --color-focus-ring: rgba(79, 70, 229, 0.35); --color-focus-ring-width: 3px; /* ───────────────────────────────────────────────────────────────── TYPOGRAPHY — font stack + size scale + weight + line-height ───────────────────────────────────────────────────────────────── */ --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace; --text-4xs: 8px; /* micro — sidebar badges, decorative */ --text-3xs: 9px; /* nano — pill-sm, icon labels */ --text-2xs: 10px; /* tiny — badge counts, meta pills */ --text-2xs-half: 10.5px; /* compact metadata precision */ --text-xs: 11px; /* helper / caption */ --text-xs-half: 11.5px; /* code blocks, help text precision */ --text-sm: 12px; /* small label / meta */ --text-compact: 13px; /* form labels, compact UI text */ --text-compact-half: 13.5px; /* textarea inputs, nav links precision */ --text-base: 14px; /* body default */ --text-base-half: 14.5px; /* body + half — training panel detail text */ --text-md: 15px; /* emphasized body */ --text-subhead: 16px; /* card names, modal headers */ --text-lg: 17px; /* card title */ --text-section: 18px; /* section headings (h2 style) */ --text-page: 19px; /* page-level h1 headings */ --text-xl: 20px; /* section heading */ --text-display: 22px; /* stat numbers, hero elements */ --text-2xl: 24px; /* page heading */ --text-stat: 26px; /* dashboard stat number display */ --text-5xl: 28px; /* large display numbers */ --text-3xl: 30px; /* hero */ --text-4xl: 36px; /* oversize */ --text-value: 42px; /* card large numeric value */ --text-icon: 72px; /* stub / icon display */ --weight-thin: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; /* uppercase micro-labels */ /* ───────────────────────────────────────────────────────────────── SPACING — 4-pt grid (use these; never raw px) ───────────────────────────────────────────────────────────────── */ --space-0: 0; --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; --space-20: 80px; /* ───────────────────────────────────────────────────────────────── RADIUS — corner rounding scale ───────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 2px; /* tiny chips */ --radius-sm: 4px; /* inputs / small buttons */ --radius-md: 6px; /* standard button / input */ --radius-lg: 10px; /* card */ --radius-xl: 14px; /* hero card */ --radius-2xl: 20px; /* large modal */ --radius-pill: 999px; /* pill / chip */ --radius-full: 50%; /* circular (avatar) */ /* ───────────────────────────────────────────────────────────────── SHADOW — elevation scale ───────────────────────────────────────────────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18); --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.05); --shadow-focus: 0 0 0 var(--color-focus-ring-width) var(--color-focus-ring); --shadow-glow-brand: 0 0 0 4px rgba(79, 70, 229, 0.18); /* ───────────────────────────────────────────────────────────────── TRANSITIONS — timing + easing tokens ───────────────────────────────────────────────────────────────── */ --transition-fast: 120ms; --transition-base: 180ms; --transition-slow: 260ms; --transition-slower: 400ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ───────────────────────────────────────────────────────────────── Z-INDEX — layering system ───────────────────────────────────────────────────────────────── */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-modal-backdrop: 1300; --z-modal: 1400; --z-popover: 1500; --z-tooltip: 1600; --z-toast: 1700; /* ───────────────────────────────────────────────────────────────── OPACITY — preset levels ───────────────────────────────────────────────────────────────── */ --opacity-0: 0; --opacity-10: 0.10; --opacity-20: 0.20; --opacity-30: 0.30; --opacity-40: 0.40; --opacity-50: 0.50; --opacity-60: 0.60; --opacity-70: 0.70; --opacity-80: 0.80; --opacity-90: 0.90; --opacity-100: 1; --opacity-disabled: 0.5; --opacity-hover: 0.85; /* ───────────────────────────────────────────────────────────────── LAYOUT — container widths, header heights ───────────────────────────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; --header-height: 56px; --sidebar-width: 240px; --sidebar-width-compact: 64px; /* ───────────────────────────────────────────────────────────────── UI-PREFERENCES (user-controllable via Settings > UI Preferences) These are overridden at runtime by html[data-ui-*] attributes. ───────────────────────────────────────────────────────────────── */ --ui-font-scale: 1.0; /* 0.85 | 0.90 | 1.00 | 1.10 | 1.20 */ --ui-space-scale: 1.0; /* compact = 0.85, comfortable = 1.00 */ } } /* @layer tokens */