/* ============================================================ TRAFFIC.BAR V2 — DESIGN TOKEN SYSTEM 2026 Refresh: Dark-first, Glassmorphism, Bold Typography Three-layer hierarchy: Primitive > Semantic > Component ============================================================ */ /* Fonts loaded via in HTML for performance — see index.html */ :root { /* ========================================================== LAYER 1: PRIMITIVE TOKENS ========================================================== */ /* --- Dark-First Palette --- */ --color-void-950: #0A0A0C; --color-void-900: #0E0E12; --color-void-850: #111116; --color-void-800: #15151B; --color-void-700: #1C1C24; --color-void-600: #24242E; --color-void-500: #2E2E3A; --color-void-400: #3A3A48; /* --- Warm Espresso Accent Layer --- */ --color-espresso-900: #0F0A08; --color-espresso-800: #1A120D; --color-espresso-700: #261A13; /* --- Orange Accent (refined for OLED) --- */ --color-orange-800: #9A3A10; --color-orange-700: #B84D1F; --color-orange-600: #B84416; --color-orange-500: #F0894A; --color-orange-400: #F4A673; --color-orange-300: #F8C8A0; /* --- Neutrals --- */ --color-white-100: #F5F0EB; --color-white-200: #E8DDD4; --color-grey-600: #5A5A6A; --color-grey-500: #8585A0; --color-grey-400: #9494A8; --color-grey-300: #B5B5C8; --color-copper-500: #D4894E; /* --- Semantic Colors --- */ --color-green-500: #22C55E; --color-green-400: #4ADE80; --color-yellow-500: #F59E0B; --color-red-500: #EF4444; --color-blue-500: #60A5FA; --color-purple-500: #A78BFA; /* --- Alpha Variants --- */ --accent-a5: rgba(184, 68, 22, 0.05); --accent-a8: rgba(184, 68, 22, 0.08); --accent-a10: rgba(184, 68, 22, 0.10); --accent-a15: rgba(184, 68, 22, 0.15); --accent-a20: rgba(184, 68, 22, 0.20); --accent-a25: rgba(184, 68, 22, 0.25); --accent-a30: rgba(184, 68, 22, 0.30); --accent-a50: rgba(184, 68, 22, 0.50); --white-a3: rgba(245, 240, 235, 0.03); --white-a5: rgba(245, 240, 235, 0.05); --white-a8: rgba(245, 240, 235, 0.08); --white-a10: rgba(245, 240, 235, 0.10); --white-a15: rgba(245, 240, 235, 0.15); --white-a25: rgba(245, 240, 235, 0.25); --white-a35: rgba(245, 240, 235, 0.35); --white-a40: rgba(245, 240, 235, 0.40); --dark-a25: rgba(14, 14, 18, 0.25); --dark-a40: rgba(14, 14, 18, 0.40); --dark-a60: rgba(14, 14, 18, 0.60); --dark-a70: rgba(14, 14, 18, 0.70); --dark-a80: rgba(14, 14, 18, 0.80); --dark-a85: rgba(14, 14, 18, 0.85); --dark-a90: rgba(14, 14, 18, 0.90); --dark-a95: rgba(14, 14, 18, 0.95); --error-a15: rgba(239, 68, 68, 0.15); --error-a25: rgba(239, 68, 68, 0.25); --success-a15: rgba(34, 197, 94, 0.15); --warning-a15: rgba(245, 158, 11, 0.15); /* --- Glassmorphism --- */ --glass-bg: rgba(24, 24, 32, 0.60); --glass-bg-strong: rgba(24, 24, 32, 0.80); --glass-border: rgba(245, 240, 235, 0.08); --glass-blur: blur(20px); --glass-blur-lg: blur(40px); /* --- Spacing (8px base) --- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-section: clamp(5rem, 8vw, 8rem); /* --- Border Radius --- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* --- Shadows --- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5); --glow-orange-sm: 0 0 0 1px rgba(184, 68, 22, 0.2), 0 8px 24px rgba(184, 68, 22, 0.10); --glow-orange-md: 0 0 0 1px rgba(184, 68, 22, 0.3), 0 16px 48px rgba(184, 68, 22, 0.15); --glow-orange-lg: 0 8px 32px rgba(184, 68, 22, 0.30); --glow-orange-pulse: 0 0 60px rgba(184, 68, 22, 0.20); /* --- Duration --- */ --duration-instant: 50ms; --duration-fast: 100ms; --duration-normal: 150ms; --duration-medium: 250ms; --duration-slow: 400ms; --duration-entrance: 600ms; --duration-dramatic: 800ms; /* --- Easing --- */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(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); --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* --- Typography --- */ --font-editorial: 'Playfair Display', 'Georgia', serif; --font-display: 'Syne', system-ui, sans-serif; --font-logo: 'Space Grotesk', 'Arial Black', system-ui, sans-serif; --font-body: 'Outfit', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* --- Type Scale (fluid) — 2026 refresh: more perceivable mobile scaling --- */ --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --font-size-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --font-size-base: clamp(1rem, 0.88rem + 0.55vw, 1.125rem); --font-size-lg: clamp(1.125rem, 0.95rem + 0.85vw, 1.375rem); --font-size-xl: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); --font-size-2xl: clamp(2rem, 1.2rem + 3.75vw, 3.75rem); --font-size-3xl: clamp(2.5rem, 1.4rem + 5.5vw, 5rem); --font-size-4xl: clamp(3rem, 1.5rem + 7vw, 6.5rem); /* ========================================================== LAYER 2: SEMANTIC TOKENS ========================================================== */ /* --- Surfaces --- */ --surface-primary: var(--color-void-900); --surface-secondary: var(--color-void-800); --surface-tertiary: var(--color-void-700); --surface-elevated: var(--color-void-600); --surface-deepest: var(--color-void-950); /* --- Text — bumped one notch brighter for WCAG AA safety on glass backgrounds --- */ --text-primary: var(--color-white-100); --text-secondary: var(--color-grey-300); --text-tertiary: var(--color-grey-400); --text-accent: var(--color-orange-500); --text-on-accent: var(--color-void-950); /* --- Borders --- */ --border-default: var(--white-a8); --border-hover: var(--white-a15); --border-focus: var(--color-orange-600); --border-subtle: var(--white-a5); --border-input: var(--white-a15); --border-input-focus: var(--color-orange-500); --border-input-error: var(--color-red-500); --border-divider: var(--white-a5); /* --- Interactive --- */ --accent: var(--color-orange-600); --accent-hover: var(--color-orange-500); --accent-active: var(--color-orange-700); --accent-soft: var(--color-orange-400); /* --- Feedback --- */ --success: var(--color-green-500); --success-surface: rgba(34, 197, 94, 0.08); --warning: var(--color-yellow-500); --warning-surface: rgba(245, 158, 11, 0.08); --error: var(--color-red-500); --error-surface: rgba(239, 68, 68, 0.08); --info: var(--color-blue-500); --info-surface: rgba(96, 165, 250, 0.08); /* --- Focus --- */ --focus-ring: 0 0 0 3px var(--accent-a50); /* ========================================================== LAYER 3: COMPONENT TOKENS ========================================================== */ /* --- Button: Primary --- */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-bg-active: var(--accent-active); --btn-primary-text: var(--text-on-accent); --btn-primary-radius: var(--radius-lg); --btn-primary-padding: 14px 28px; /* --- Button: Secondary --- */ --btn-secondary-bg: transparent; --btn-secondary-border: var(--white-a25); --btn-secondary-border-hover: var(--accent); --btn-secondary-text: var(--text-primary); --btn-secondary-text-hover: var(--accent); /* --- Card / Glass Card --- */ --card-bg: var(--glass-bg); --card-border: var(--glass-border); --card-border-hover: var(--white-a15); --card-radius: var(--radius-2xl); --card-padding: 28px 24px; --card-shadow-hover: var(--glow-orange-sm); --card-blur: var(--glass-blur); /* --- Input --- */ --input-bg: var(--white-a5); --input-border: var(--border-input); --input-border-focus: var(--border-input-focus); --input-border-error: var(--border-input-error); --input-text: var(--text-primary); --input-placeholder: var(--text-tertiary); --input-radius: var(--radius-md); --input-padding: 14px 16px; --input-focus-ring: 0 0 0 3px var(--accent-a25); /* --- Nav --- */ --nav-bg-default: transparent; --nav-bg-scrolled: var(--dark-a90); --nav-blur: var(--glass-blur); --nav-link-color: var(--text-primary); --nav-link-hover: var(--accent); }