/* * Empyrean Dynamics — Design Tokens * Arctic Blue Theme System * * Usage: * or * * body { background: var(--ed-bg); color: var(--ed-text-primary); } * * The default is dark. Light mode activates via [data-theme="light"], * or via @media (prefers-color-scheme: light) if you prefer auto. */ /* ============================================================ DARK THEME (default) ============================================================ */ :root, [data-theme="dark"] { /* Surfaces */ --ed-bg: #0d1117; --ed-surface: #151b23; --ed-surface-raised: #1a2332; --ed-border: #1a2332; --ed-border-subtle: #14181f; /* Text */ --ed-text-primary: #e8e8ec; --ed-text-secondary: #8b9198; --ed-text-muted: #4a5060; --ed-text-disabled: #2d3440; /* Accent — Arctic Blue */ --ed-accent: #5b9bd5; --ed-accent-hover: #7bb8e8; --ed-accent-pressed: #3d7ab8; --ed-accent-text: #5b9bd5; /* same as accent on dark */ --ed-accent-subtle: rgba(91, 155, 213, 0.12); --ed-accent-muted: rgba(91, 155, 213, 0.06); /* Secondary / Tertiary */ --ed-secondary: #3d7ab8; --ed-tertiary: #4a88c2; /* Severity */ --ed-success: #3d9a6d; --ed-success-subtle: rgba(61, 154, 109, 0.12); --ed-warning: #c8a040; --ed-warning-subtle: rgba(200, 160, 64, 0.12); --ed-error: #d05040; --ed-error-subtle: rgba(208, 80, 64, 0.12); --ed-info: #5b9bd5; --ed-info-subtle: rgba(91, 155, 213, 0.12); /* Severity text (same as fill on dark) */ --ed-success-text: #3d9a6d; --ed-warning-text: #c8a040; --ed-error-text: #d05040; --ed-info-text: #5b9bd5; /* Impact probability badges */ --ed-negligible-bg: #1a2332; --ed-negligible-text: #5b9bd5; --ed-elevated-bg: rgba(220, 120, 40, 0.2); --ed-elevated-text: #e8a040; /* Event highlights — transient attention markers (celestial amber) */ --ed-event: #e8a040; --ed-event-subtle: rgba(232, 160, 64, 0.15); --ed-event-text: #e8a040; --ed-event-border: rgba(232, 160, 64, 0.30); /* Badges */ --ed-badge-alpha-bg: var(--ed-accent-subtle); --ed-badge-alpha-text: var(--ed-accent); --ed-badge-planned-bg: rgba(75, 80, 96, 0.20); --ed-badge-planned-text: var(--ed-text-muted); /* Cards */ --ed-card-bg: var(--ed-surface); --ed-card-border: var(--ed-border); --ed-card-hover-border: var(--ed-accent); --ed-card-selected-bg: rgba(91, 155, 213, 0.06); --ed-card-selected-border: var(--ed-accent); --ed-card-shadow: var(--ed-shadow-sm); --ed-card-hover-shadow: var(--ed-shadow-md); /* Sidebar */ --ed-sidebar-bg: var(--ed-bg); --ed-sidebar-border: var(--ed-border); --ed-sidebar-active-bg: rgba(91, 155, 213, 0.10); --ed-sidebar-active-text: var(--ed-accent); --ed-sidebar-inactive-text: var(--ed-text-secondary); --ed-sidebar-hover-bg: rgba(91, 155, 213, 0.05); /* Timeline / scrubber */ --ed-timeline-bg: var(--ed-surface); --ed-timeline-track: #2d3440; --ed-timeline-progress: var(--ed-accent); --ed-timeline-thumb: var(--ed-accent); --ed-timeline-label: var(--ed-text-secondary); --ed-timeline-speed-active-border: var(--ed-accent); --ed-timeline-speed-inactive: var(--ed-text-muted); /* Planet labels (3D scene) */ --ed-planet-label-color: var(--ed-text-secondary); --ed-planet-label-bg: rgba(13, 17, 23, 0.70); --ed-planet-label-size: 10px; --ed-planet-label-weight: 400; /* Status bar */ --ed-statusbar-bg: var(--ed-bg); --ed-statusbar-border: var(--ed-border); --ed-statusbar-text: var(--ed-text-muted); --ed-statusbar-accent: var(--ed-accent); /* Empty states */ --ed-empty-text: var(--ed-text-muted); --ed-empty-icon: var(--ed-text-disabled); /* Tab underline */ --ed-tab-underline-active: var(--ed-accent); --ed-tab-underline-inactive: transparent; --ed-tab-underline-hover: rgba(91, 155, 213, 0.30); /* Interactive */ --ed-focus-ring: rgba(91, 155, 213, 0.5); --ed-selection-bg: #1d3a5c; --ed-selection-text: #e8e8ec; --ed-input-bg: #151b23; --ed-input-border: #1a2332; --ed-input-focus: #5b9bd5; /* Buttons */ --ed-btn-primary-bg: #5b9bd5; --ed-btn-primary-text: #0d1117; --ed-btn-primary-hover: #7bb8e8; --ed-btn-ghost-border: rgba(91, 155, 213, 0.3); --ed-btn-ghost-text: #5b9bd5; --ed-btn-ghost-hover-bg: rgba(91, 155, 213, 0.08); /* 3D scene */ --ed-scene-bg: #0d1117; --ed-orbit-stroke: rgba(232, 232, 236, 0.25); --ed-grid-line: rgba(91, 155, 213, 0.06); --ed-star-opacity: 0.3; /* Chart / data viz */ --ed-chart-line: #5b9bd5; --ed-chart-fill: rgba(91, 155, 213, 0.15); --ed-chart-grid: rgba(91, 155, 213, 0.06); --ed-chart-axis: #4a5060; --ed-chart-label: #8b9198; /* Shadows */ --ed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ed-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --ed-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); /* Scrollbar */ --ed-scrollbar-track: #0d1117; --ed-scrollbar-thumb: #2d3440; --ed-scrollbar-hover: #4a5060; /* Tab bar */ --ed-tab-bg: #0d1117; --ed-tab-active-bg: #5b9bd5; --ed-tab-active-text: #0d1117; --ed-tab-inactive: #8b9198; } /* ============================================================ LIGHT THEME ============================================================ */ [data-theme="light"] { /* Surfaces */ --ed-bg: #f5f6f8; --ed-surface: #ffffff; --ed-surface-raised: #ffffff; --ed-border: #d8dce2; --ed-border-subtle: #e8eaee; /* Text */ --ed-text-primary: #1a1f28; --ed-text-secondary: #5a6170; --ed-text-muted: #8b9198; --ed-text-disabled: #c0c4cc; /* Accent — Arctic Blue (darkened for contrast) */ --ed-accent: #5b9bd5; /* fills, icons, buttons */ --ed-accent-hover: #4a88c2; --ed-accent-pressed: #3d7ab8; --ed-accent-text: #2d6da3; /* text, links — WCAG AA on white */ --ed-accent-subtle: rgba(91, 155, 213, 0.10); --ed-accent-muted: rgba(91, 155, 213, 0.05); /* Secondary / Tertiary */ --ed-secondary: #3d7ab8; --ed-tertiary: #2d6da3; /* Severity (darkened for light bg contrast) */ --ed-success: #1a7a4a; --ed-success-subtle: rgba(26, 122, 74, 0.08); --ed-warning: #9a7520; --ed-warning-subtle: rgba(154, 117, 32, 0.08); --ed-error: #b83a2a; --ed-error-subtle: rgba(184, 58, 42, 0.08); --ed-info: #2d6da3; --ed-info-subtle: rgba(45, 109, 163, 0.08); /* Severity text (darkened for light) */ --ed-success-text: #1a7a4a; --ed-warning-text: #9a7520; --ed-error-text: #b83a2a; --ed-info-text: #2d6da3; /* Impact probability badges */ --ed-negligible-bg: rgba(45, 109, 163, 0.08); --ed-negligible-text: #2d6da3; --ed-elevated-bg: rgba(154, 117, 32, 0.10); --ed-elevated-text: #9a7520; /* Event highlights — celestial amber (darkened for light bg) */ --ed-event: #c07820; --ed-event-subtle: rgba(192, 120, 32, 0.08); --ed-event-text: #9a6018; --ed-event-border: rgba(192, 120, 32, 0.25); /* Badges */ --ed-badge-alpha-bg: var(--ed-accent-subtle); --ed-badge-alpha-text: var(--ed-accent-text); --ed-badge-planned-bg: rgba(138, 145, 155, 0.12); --ed-badge-planned-text: var(--ed-text-muted); /* Cards */ --ed-card-bg: var(--ed-surface); --ed-card-border: #c8cdd4; /* stronger than --ed-border on light */ --ed-card-hover-border: var(--ed-accent); --ed-card-selected-bg: rgba(91, 155, 213, 0.06); --ed-card-selected-border: var(--ed-accent); --ed-card-shadow: var(--ed-shadow-sm); --ed-card-hover-shadow: var(--ed-shadow-md); /* Sidebar */ --ed-sidebar-bg: #0d1117; /* sidebar stays dark in light mode */ --ed-sidebar-border: #1a2332; --ed-sidebar-active-bg: rgba(91, 155, 213, 0.10); --ed-sidebar-active-text: var(--ed-accent); --ed-sidebar-inactive-text: #8b9198; --ed-sidebar-hover-bg: rgba(91, 155, 213, 0.05); /* Timeline / scrubber */ --ed-timeline-bg: var(--ed-surface); --ed-timeline-track: #d8dce2; --ed-timeline-progress: var(--ed-accent); --ed-timeline-thumb: var(--ed-accent); --ed-timeline-label: var(--ed-text-secondary); --ed-timeline-speed-active-border: var(--ed-accent); --ed-timeline-speed-inactive: var(--ed-text-muted); /* Planet labels (3D scene) */ --ed-planet-label-color: var(--ed-text-secondary); --ed-planet-label-bg: rgba(245, 246, 248, 0.70); --ed-planet-label-size: 10px; --ed-planet-label-weight: 400; /* Status bar */ --ed-statusbar-bg: var(--ed-surface); --ed-statusbar-border: var(--ed-border); --ed-statusbar-text: var(--ed-text-muted); --ed-statusbar-accent: var(--ed-accent-text); /* Empty states */ --ed-empty-text: var(--ed-text-muted); --ed-empty-icon: var(--ed-text-disabled); /* Tab underline */ --ed-tab-underline-active: var(--ed-accent); --ed-tab-underline-inactive: transparent; --ed-tab-underline-hover: rgba(91, 155, 213, 0.20); /* Interactive */ --ed-focus-ring: rgba(91, 155, 213, 0.4); --ed-selection-bg: rgba(91, 155, 213, 0.20); --ed-selection-text: #1a1f28; --ed-input-bg: #ffffff; --ed-input-border: #d8dce2; --ed-input-focus: #5b9bd5; /* Buttons */ --ed-btn-primary-bg: #5b9bd5; --ed-btn-primary-text: #ffffff; --ed-btn-primary-hover: #4a88c2; --ed-btn-ghost-border: rgba(45, 109, 163, 0.25); --ed-btn-ghost-text: #2d6da3; --ed-btn-ghost-hover-bg: rgba(91, 155, 213, 0.06); /* 3D scene */ --ed-scene-bg: #f0f1f4; --ed-orbit-stroke: rgba(26, 31, 40, 0.20); --ed-grid-line: rgba(45, 109, 163, 0.08); --ed-star-opacity: 0.15; /* Chart / data viz */ --ed-chart-line: #2d6da3; --ed-chart-fill: rgba(91, 155, 213, 0.12); --ed-chart-grid: rgba(26, 31, 40, 0.06); --ed-chart-axis: #8b9198; --ed-chart-label: #5a6170; /* Shadows */ --ed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ed-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ed-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); /* Scrollbar */ --ed-scrollbar-track: #f5f6f8; --ed-scrollbar-thumb: #d8dce2; --ed-scrollbar-hover: #c0c4cc; /* Tab bar */ --ed-tab-bg: #ffffff; --ed-tab-active-bg: #5b9bd5; --ed-tab-active-text: #ffffff; --ed-tab-inactive: #5a6170; } /* ============================================================ AUTO THEME (follows OS preference) Uncomment to use instead of data-theme attribute. ============================================================ */ /* @media (prefers-color-scheme: light) { :root { --ed-bg: #f5f6f8; --ed-surface: #ffffff; ... (copy light values) } } */ /* ============================================================ TYPOGRAPHY TOKENS ============================================================ */ :root { /* Font families */ --ed-font-display: 'Syne', sans-serif; --ed-font-mono: 'JetBrains Mono', monospace; --ed-font-body: 'DM Sans', sans-serif; /* Font weights */ --ed-weight-display: 700; --ed-weight-mono: 300; --ed-weight-body: 300; /* Font sizes */ --ed-size-display: 48px; --ed-size-h1: 28px; --ed-size-h2: 20px; --ed-size-h3: 16px; --ed-size-body: 14px; --ed-size-small: 12px; --ed-size-caption: 10px; --ed-size-mono-data: 11px; /* Letter spacing */ --ed-tracking-display: -0.5px; --ed-tracking-label: 1.5px; --ed-tracking-mono: 0.5px; /* Line heights */ --ed-leading-tight: 1.1; --ed-leading-normal: 1.5; --ed-leading-relaxed: 1.8; /* Border radius */ --ed-radius-sm: 4px; --ed-radius-md: 6px; --ed-radius-lg: 8px; --ed-radius-xl: 12px; --ed-radius-icon: 80px; /* PNG icon corners */ /* Spacing */ --ed-space-xs: 4px; --ed-space-sm: 8px; --ed-space-md: 16px; --ed-space-lg: 24px; --ed-space-xl: 40px; --ed-space-2xl: 60px; /* Transitions */ --ed-transition-fast: 150ms ease; --ed-transition-normal: 250ms ease; }