/* ═══════════════════════════════════════════════════════════════════════════ * CEO COMMAND CENTER · DESIGN TOKENS — v4 EDITORIAL SUNRISE * * Direction: Warm cream canvas with editorial typography and bronze metallic * accents. Sézane × The Row × Linear. Soft, feminine, futuristic. * "Future me" energy — luxurious without being heavy. * * Three-layer architecture: Primitive → Semantic → Component * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ┌──────────────────────────────────────────────────────────────────────┐ * │ LAYER 1 — PRIMITIVES │ * │ Editorial latte palette. Never reference these directly in markup. │ * └──────────────────────────────────────────────────────────────────────┘ */ /* Colors — cream surfaces (canvas to elevated) */ --p-cream-canvas: #F2E8DC; --p-cream-paper: #FBF5EB; --p-cream-raised: #FFFAF1; --p-cream-veil: #F7EEDF; /* Colors — espresso text scale */ --p-espresso-900: #2B1810; --p-espresso-700: #4B2E1F; --p-mocha-600: #6B4830; --p-mocha-500: #8B6849; --p-dust-400: #A88670; --p-dust-300: #C4A993; --p-whisper-200: #D9C3AD; --p-whisper-100: #E8D5BE; /* Colors — bronze metallic (replaces gold accent) */ --p-bronze-300: #C9A487; --p-bronze-400: #B58A6A; --p-bronze-500: #A87B5D; /* primary accent */ --p-bronze-600: #8C6347; --p-bronze-700: #6B4A34; /* Colors — warm status hues */ --p-sage-500: #8FA988; /* status: active — soft warm green */ --p-sage-400: #A4BFA0; --p-apricot-500: #D4956A; /* status: building — warm amber */ --p-apricot-400: #E5AC85; --p-blush-500: #C9847F; /* streak — warm rose, not pink */ --p-blush-300: #E7C4B5; /* Decorative — dawn gradients */ --p-peach-glow: #F4D5C3; --p-champagne: #E8D5BE; --p-mauve-mist: #C4A89A; --p-rose-whisper: #EFD4C8; /* Spacing — 4px base */ --p-space-0: 0; --p-space-1: 0.25rem; --p-space-2: 0.5rem; --p-space-3: 0.75rem; --p-space-4: 1rem; --p-space-5: 1.25rem; --p-space-6: 1.5rem; --p-space-7: 1.75rem; --p-space-8: 2rem; --p-space-10: 2.5rem; --p-space-12: 3rem; --p-space-14: 3.5rem; --p-space-16: 4rem; --p-space-20: 5rem; /* Radii — softer, more organic than v3 */ --p-radius-sm: 0.5rem; --p-radius-md: 0.875rem; --p-radius-lg: 1.25rem; --p-radius-xl: 1.75rem; --p-radius-2xl: 2rem; --p-radius-3xl: 2.5rem; --p-radius-pill: 9999px; /* Typography — families */ --p-font-display: "Fraunces", "Tobias", Georgia, serif; --p-font-sans: "DM Sans", "Söhne", system-ui, sans-serif; --p-font-mono: "DM Mono", "Berkeley Mono", monospace; /* Typography — sizes */ --p-text-2xs: 0.6875rem; --p-text-xs: 0.75rem; --p-text-sm: 0.875rem; --p-text-base: 1rem; --p-text-lg: 1.125rem; --p-text-xl: 1.375rem; --p-text-2xl: 1.75rem; --p-text-3xl: 2.125rem; --p-text-4xl: 2.75rem; --p-text-5xl: 3.5rem; --p-text-6xl: 4.5rem; --p-text-7xl: 5.5rem; --p-text-8xl: 6.5rem; /* Typography — weights */ --p-weight-light: 300; --p-weight-regular: 400; --p-weight-medium: 500; --p-weight-semibold: 600; --p-weight-bold: 700; /* Typography — leading / tracking */ --p-leading-tight: 1.0; --p-leading-snug: 1.2; --p-leading-normal: 1.5; --p-leading-relaxed: 1.65; --p-tracking-tight: -0.02em; --p-tracking-normal: 0; --p-tracking-wide: 0.08em; --p-tracking-wider: 0.18em; --p-tracking-widest: 0.28em; /* Motion */ --p-ease-fluid: cubic-bezier(0.22, 1, 0.36, 1); --p-ease-anticipate: cubic-bezier(0.34, 1.56, 0.64, 1); --p-duration-instant: 100ms; --p-duration-fast: 280ms; --p-duration-medium: 540ms; --p-duration-slow: 800ms; --p-duration-pulse: 3000ms; /* ┌──────────────────────────────────────────────────────────────────────┐ * │ LAYER 2 — SEMANTIC │ * └──────────────────────────────────────────────────────────────────────┘ */ /* Surfaces */ --color-surface-canvas: var(--p-cream-canvas); --color-surface-paper: var(--p-cream-paper); --color-surface-elevated: var(--p-cream-raised); --color-surface-veil: var(--p-cream-veil); /* Text */ --color-text-primary: var(--p-espresso-900); --color-text-secondary: var(--p-mocha-600); --color-text-tertiary: var(--p-mocha-500); --color-text-quaternary: var(--p-dust-400); --color-text-whisper: var(--p-dust-300); --color-text-accent: var(--p-bronze-500); --color-text-accent-hover: var(--p-bronze-600); --color-text-on-accent: var(--p-cream-raised); /* Borders */ --color-border-hairline: rgba(43, 24, 16, 0.06); --color-border-subtle: rgba(43, 24, 16, 0.10); --color-border-default: rgba(43, 24, 16, 0.14); --color-border-accent: rgba(168, 123, 93, 0.35); --color-border-accent-strong: rgba(168, 123, 93, 0.55); /* Accent (bronze metallic) */ --color-accent: var(--p-bronze-500); --color-accent-hover: var(--p-bronze-400); --color-accent-soft: rgba(168, 123, 93, 0.10); --color-accent-glow: rgba(168, 123, 93, 0.18); --color-accent-edge: rgba(168, 123, 93, 0.20); /* Status */ --color-status-active: var(--p-sage-500); --color-status-active-glow: rgba(143, 169, 136, 0.30); --color-status-building: var(--p-apricot-500); --color-status-building-glow: rgba(212, 149, 106, 0.28); --color-status-streak: var(--p-blush-500); /* Selection */ --color-selection-bg: var(--p-bronze-500); --color-selection-fg: var(--p-cream-paper); /* Dawn atmosphere — the magic backdrop */ --gradient-dawn-tl: rgba(244, 213, 195, 0.55); /* peach top-left */ --gradient-dawn-mr: rgba(232, 213, 190, 0.45); /* champagne mid-right */ --gradient-dawn-bc: rgba(196, 168, 154, 0.30); /* mauve bottom-center */ /* Type roles */ --font-display: var(--p-font-display); --font-body: var(--p-font-sans); --font-mono: var(--p-font-mono); --type-eyebrow-size: var(--p-text-2xs); --type-eyebrow-weight: var(--p-weight-medium); --type-eyebrow-tracking: var(--p-tracking-widest); --type-eyebrow-color: var(--color-text-tertiary); /* Radii (semantic) */ --radius-card: var(--p-radius-3xl); --radius-input: var(--p-radius-lg); --radius-pill: var(--p-radius-pill); /* Motion (semantic) */ --transition-fast: var(--p-duration-fast) var(--p-ease-fluid); --transition-base: var(--p-duration-medium) var(--p-ease-fluid); --transition-slow: var(--p-duration-slow) var(--p-ease-fluid); /* ┌──────────────────────────────────────────────────────────────────────┐ * │ LAYER 3 — COMPONENT │ * └──────────────────────────────────────────────────────────────────────┘ */ /* Paper card — the new "glass" */ --card-bg: var(--color-surface-paper); --card-bg-hover: var(--color-surface-elevated); --card-border: var(--color-border-hairline); --card-shadow: 0 1px 2px rgba(75, 46, 31, 0.04), 0 8px 24px rgba(75, 46, 31, 0.05); --card-shadow-hover: 0 2px 4px rgba(75, 46, 31, 0.06), 0 16px 40px rgba(168, 123, 93, 0.10); --card-edge-gradient: linear-gradient(135deg, rgba(168, 123, 93, 0.22), transparent 50%, rgba(43, 24, 16, 0.04)); /* HRH lane card */ --hrh-card-padding: var(--p-space-7); --hrh-icon-color-idle: var(--p-mocha-500); --hrh-icon-color-active: var(--p-bronze-600); --hrh-active-border: var(--color-border-accent-strong); --hrh-active-bg: linear-gradient(180deg, var(--p-cream-raised) 0%, var(--p-rose-whisper) 100%); --hrh-active-shadow: 0 4px 12px rgba(201, 132, 127, 0.18), 0 16px 40px rgba(168, 123, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Empire KPI card */ --kpi-number-color: var(--color-text-primary); --kpi-label-color: var(--color-text-tertiary); --kpi-meta-color: var(--color-text-secondary); /* Progress bar */ --progress-track-bg: rgba(168, 123, 93, 0.18); --progress-fill: linear-gradient(to right, var(--p-bronze-600), var(--p-bronze-400)); --progress-height: 4px; --progress-transition: width var(--p-duration-slow) var(--p-ease-fluid); /* Pulse ring */ --pulse-ring-duration: var(--p-duration-pulse); --pulse-dot-size: 9px; /* Quick-link pill */ --pill-padding-y: var(--p-space-2); --pill-padding-x: var(--p-space-5); --pill-text-size: var(--p-text-sm); --pill-bg: var(--color-surface-paper); --pill-border: var(--color-border-default); /* Focus ring */ --focus-ring-color: rgba(168, 123, 93, 0.6); --focus-ring-width: 1.5px; --focus-ring-offset: 3px; /* Decorative — paper grain noise opacity */ --grain-opacity: 0.035; /* ┌──────────────────────────────────────────────────────────────────────┐ * │ BRITTANY OS — v5 EXTENSIONS │ * │ Lavender atmosphere + chrome detail + glass surfaces │ * └──────────────────────────────────────────────────────────────────────┘ */ /* Lavender — soft girl spaceship */ --p-lavender-100: #EDE6F1; --p-lavender-200: #DDD0E4; --p-lavender-300: #C7B5D2; --p-lavender-400: #B098C0; --p-lavender-500: #9B7FAD; /* Chrome — pearl + silver detail */ --p-chrome-100: #F4F0EC; --p-chrome-300: #DFD5CB; --p-chrome-500: #BFB0A2; --p-chrome-edge: linear-gradient(135deg, #F8F2E9 0%, #DCC9B6 35%, #FFF8EC 65%, #C8B79F 100%); /* Glass surfaces — the new "paper" */ --glass-bg: rgba(255, 250, 241, 0.62); --glass-bg-strong: rgba(255, 250, 241, 0.78); --glass-border: rgba(255, 255, 255, 0.55); --glass-edge: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(168,123,93,0.18) 45%, rgba(155,127,173,0.12) 100%); --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 -1px 0 rgba(168, 123, 93, 0.08) inset, 0 18px 48px rgba(75, 46, 31, 0.10), 0 4px 12px rgba(155, 127, 173, 0.08); --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(168, 123, 93, 0.12) inset, 0 28px 70px rgba(75, 46, 31, 0.16), 0 6px 18px rgba(155, 127, 173, 0.14); --glass-blur: blur(18px) saturate(115%); /* HRH orb gradients */ --orb-hot: radial-gradient(circle at 30% 28%, #FFE4D2 0%, #E5A580 45%, #C9847F 100%); --orb-rich: radial-gradient(circle at 30% 28%, #F6E6CC 0%, #D6B58A 45%, #A87B5D 100%); --orb-happy: radial-gradient(circle at 30% 28%, #F2E2EE 0%, #C7B5D2 45%, #9B7FAD 100%); /* Dock */ --dock-bg: rgba(255, 250, 241, 0.78); --dock-border: rgba(255, 255, 255, 0.60); --dock-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 18px 50px rgba(75, 46, 31, 0.14), 0 4px 14px rgba(155, 127, 173, 0.10); } /* Reduced motion — respect user preference */ @media (prefers-reduced-motion: reduce) { :root { --p-duration-instant: 1ms; --p-duration-fast: 1ms; --p-duration-medium: 1ms; --p-duration-slow: 1ms; --p-duration-pulse: 1ms; } }