/* * Skydancer v2 Design Token Layer — UX-Polish-A * * SOURCE OF TRUTH for all CSS custom properties. * Link this file first in every HTML page: * * * Palette tokens: raw hex values. Never use palette tokens in component CSS. * Semantic tokens: reference palette tokens. Use these in all component CSS. * Phase 5 brand lock: change --brand-primary when final brand color is chosen. */ :root { /* ═══════════════════════════════════════════════════════ PALETTE — raw color values, dark theme (default) Do not use palette tokens directly in component CSS. Reference semantic tokens instead. ═══════════════════════════════════════════════════════ */ --palette-navy-950: #060E1D; --palette-navy-900: #0A1628; --palette-navy-800: #0F2040; --palette-navy-750: #0B1929; --palette-navy-700: #132848; --palette-navy-600: #1A3A6B; --palette-navy-500: #204A7A; --palette-navy-400: #5A7A94; --palette-navy-300: #A8C0D6; --palette-teal-500: #00C4CC; --palette-teal-300: #4DD9DF; --palette-teal-a15: rgba(0, 196, 204, 0.15); --palette-teal-a12: rgba(0, 196, 204, 0.12); --palette-teal-a08: rgba(0, 196, 204, 0.08); --palette-teal-a06: rgba(0, 196, 204, 0.06); --palette-teal-a04: rgba(0, 196, 204, 0.04); --palette-red-500: #E8394D; --palette-red-a15: rgba(232, 57, 77, 0.15); --palette-red-a12: rgba(232, 57, 77, 0.12); --palette-red-a08: rgba(232, 57, 77, 0.08); --palette-amber-500: #F5A623; --palette-amber-a15: rgba(245, 166, 35, 0.15); --palette-amber-a10: rgba(245, 166, 35, 0.10); --palette-amber-a08: rgba(245, 166, 35, 0.08); --palette-green-500: #22D07A; --palette-green-a12: rgba(34, 208, 122, 0.12); --palette-green-a08: rgba(34, 208, 122, 0.08); --palette-purple-500: #9B7FE8; --palette-purple-a12: rgba(155, 127, 232, 0.12); --palette-white: #FFFFFF; --palette-black: #000000; /* ═══════════════════════════════════════════════════════ BRAND — placeholder pointing to teal until Phase 5 Phase 5 action: swap --brand-primary to locked color; all components inherit the change automatically. ═══════════════════════════════════════════════════════ */ --brand-primary: var(--palette-teal-500); --brand-primary-bg: var(--palette-teal-a08); --brand-primary-border: rgba(0, 196, 204, 0.30); --brand-primary-glow: var(--palette-teal-a15); /* Complementary accent colors — prevents one-note drift */ --brand-success: var(--palette-green-500); --brand-warning: var(--palette-amber-500); --brand-danger: var(--palette-red-500); --brand-info: var(--palette-purple-500); /* ═══════════════════════════════════════════════════════ SEMANTIC — SURFACE ═══════════════════════════════════════════════════════ */ --bg: var(--palette-navy-900); --nav: var(--palette-navy-950); --panel: var(--palette-navy-800); --panel-bright: var(--palette-navy-700); --card: var(--palette-navy-700); --surface1: var(--palette-navy-700); --border: var(--palette-navy-600); /* ═══════════════════════════════════════════════════════ SEMANTIC — TEXT ═══════════════════════════════════════════════════════ */ --text1: var(--palette-white); --text2: var(--palette-navy-300); --text3: var(--palette-navy-400); /* ═══════════════════════════════════════════════════════ SEMANTIC — ACTION COLORS These aliases keep existing dashboard code working. ═══════════════════════════════════════════════════════ */ --teal: var(--palette-teal-500); --teal-glow: var(--palette-teal-a15); --teal-dim: var(--palette-teal-a06); --accent: var(--palette-teal-500); --red: var(--palette-red-500); --amber: var(--palette-amber-500); --green: var(--palette-green-500); --purple: var(--palette-purple-500); /* ═══════════════════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════════════════ */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px; /* ═══════════════════════════════════════════════════════ SPACING — 4-px base grid ═══════════════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ═══════════════════════════════════════════════════════ TYPOGRAPHY No vw / vh / cqw units — fixed px only for token layer. No negative letter-spacing values. ═══════════════════════════════════════════════════════ */ --font-sans: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; /* Size scale */ --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; /* Weight */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* Line height */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.6; /* Letter spacing — positive only; zero is canonical neutral */ --ls-tight: 0em; --ls-normal: 0em; --ls-wide: 0.04em; --ls-wider: 0.06em; --ls-caps: 0.08em; /* ═══════════════════════════════════════════════════════ SHADOW ═══════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60); --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.45); /* Teal glow — use sparingly; primary CTAs only */ --shadow-brand: 0 4px 16px rgba(0, 196, 204, 0.20); /* Overlay scrim — modal/drawer backdrop */ --overlay-scrim: rgba(0, 0, 0, 0.60); /* ═══════════════════════════════════════════════════════ FOCUS RING Used by all interactive elements for keyboard navigation. Must be present; never remove from interactive elements. ═══════════════════════════════════════════════════════ */ --focus-ring: 0 0 0 3px rgba(0, 196, 204, 0.40); --focus-ring-danger: 0 0 0 3px rgba(232, 57, 77, 0.35); --focus-color: var(--palette-teal-500); --focus-offset: 2px; /* ═══════════════════════════════════════════════════════ TRANSITION ═══════════════════════════════════════════════════════ */ --transition-fast: 0.12s ease; --transition-base: 0.18s ease; --transition-slow: 0.28s ease; /* ═══════════════════════════════════════════════════════ TOUCH / ACCESSIBILITY MINIMUMS ═══════════════════════════════════════════════════════ */ --touch-min: 44px; /* WCAG 2.5.5 minimum tap target */ --touch-sm: 36px; /* compact touch targets (toolbar icons) */ /* ═══════════════════════════════════════════════════════ Z-INDEX STACK ═══════════════════════════════════════════════════════ */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-tooltip: 400; } /* ═══════════════════════════════════════════════════════════ LIGHT THEME — Phase 5 placeholder These values are intentionally distinct from dark to avoid one-note drift. Final values locked during Phase 5 brand pass. ═══════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { :root { /* Surface */ --bg: #F4F7FA; --nav: #FFFFFF; --panel: #FFFFFF; --panel-bright: #EEF2F7; --card: #FFFFFF; --surface1: #EEF2F7; --border: #C8D8E8; /* Text */ --text1: #0A1628; --text2: #3A5A7A; --text3: #7A9BB4; /* Focus ring adapts to light background */ --focus-ring: 0 0 0 3px rgba(0, 150, 160, 0.40); /* Shadows lighten on white backgrounds */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.14); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18); --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.10); } }