/* ═══════════════════════════════════════════════════════════════ RAVEN AI FUSION — DESIGN TOKENS frontend/css/tokens.css ─────────────────────────────────────────────────────────────── LOAD ORDER: must appear BEFORE style.css in index.html so that new components can use these variables and legacy rules in style.css can be incrementally migrated to reference them. Authority: this file IS the canonical token set. Every value here is the single source of truth extracted from style.css and the UX overhaul spec (§8.4). style.css is NOT rewritten — its :root block remains in place for backwards compatibility; new surfaces MUST use --rv-* tokens, not bare values. Convention: --rv-color-* colour ramp (semantic aliases included) --rv-space-* spacing scale (4-px grid) --rv-fs-* font-size scale (floor: --rv-fs-xs = 0.78rem ≈ 11px) --rv-fw-* font-weight --rv-r-* border-radius --rv-dur-* animation/transition durations --rv-ease-* easing curves --rv-z-* z-index ladder (authoritative — no other z-indexes) ═══════════════════════════════════════════════════════════════ */ :root { /* ── COLOUR — base ramp ───────────────────────────────────── Neutral surface/text/border ramp is ALIASED to the canonical theme tokens (theme-tokens.css var(--bg)/--panel/--text/--line …) so every --rv-* consumer flips with `data-theme` instead of staying dark-on-dark in light mode (bi-theme spec T2). The canonical tokens are guaranteed present on /fusion + /crucible (theme-tokens.css + the style.css html:not([data-theme]) dark fallback). var() resolves at use-time, so the load order vs. theme-tokens.css does not matter. The ops-accent is routed to the canonical --accent (cyan failed contrast on light); the vivid severity ramp stays literal by design — low-alpha severity tints read on BOTH themes. Original dark literals kept in the trailing comments for reference. */ /* Backgrounds */ --rv-color-bg-root: var(--bg); /* was #060810 */ --rv-color-bg-primary: var(--bg); /* was #080b12 */ --rv-color-bg-secondary: var(--panel2); /* was #0c101a */ --rv-color-bg-panel: var(--panel); /* was #0f1420 */ --rv-color-bg-card: var(--panel2); /* was #131826 */ --rv-color-bg-card-hover: var(--hover); /* was #181e2e */ --rv-color-bg-glass: color-mix(in srgb, var(--panel) 88%, transparent); /* was rgba(15,20,32,.75) */ --rv-color-bg-overlay: rgba(6, 8, 16, 0.82); /* dialog/drawer scrim — dim reads on both themes */ /* Accent — ROUTED to the canonical --accent token so accent TEXT reads on BOTH themes. Ops-cyan (#00e5ff / #00d4ff) on a LIGHT surface fails contrast (~1.55:1, e.g. the active "⚔ 2525" toolbar label), so cyan is now reserved for map/imagery overlays only (spec §1.1/§1.2). var(--accent) flips: light #2563eb (dark blue), explicit-dark #3da9fc, default-dark #3da9fc (style.css html:not([data-theme]) fallback) — all legible. --rv-accent is the legacy short alias consumed by sidc_symbology.css + timeline_controller.css. */ --rv-accent: var(--accent); --rv-color-accent: var(--accent); --rv-color-accent-dim: color-mix(in srgb, var(--accent) 16%, transparent); /* translucent wash (was #0099bb) */ --rv-color-accent-glow: var(--accent-soft); /* was rgba(0,229,255,.18) */ --rv-color-accent-border: color-mix(in srgb, var(--accent) 38%, transparent); /* was rgba(0,229,255,.35) */ /* Surface states (consumed by nav_cycle.css; alias to flipping tokens) */ --rv-color-surface-hover: var(--hover); --rv-color-surface-active: var(--sel); /* Green */ --rv-color-green: #00ff88; --rv-color-green-dim: rgba(0, 255, 136, 0.15); /* Severity */ --rv-color-sev-low: #00e676; --rv-color-sev-medium: #ffab40; --rv-color-sev-high: #ff6d00; --rv-color-sev-critical: #ff1744; --rv-color-sev-low-bg: rgba(0, 230, 118, 0.12); --rv-color-sev-medium-bg: rgba(255, 171, 64, 0.12); --rv-color-sev-high-bg: rgba(255, 109, 0, 0.14); --rv-color-sev-critical-bg: rgba(255, 23, 68, 0.14); --rv-color-danger: var(--bad); /* nav_cycle close/danger affordance */ /* Semantic aliases for UIKit variants */ --rv-color-variant-info: var(--rv-color-accent); --rv-color-variant-info-bg: var(--rv-color-accent-glow); --rv-color-variant-success: var(--rv-color-sev-low); --rv-color-variant-success-bg: var(--rv-color-sev-low-bg); --rv-color-variant-warn: var(--rv-color-sev-medium); --rv-color-variant-warn-bg: var(--rv-color-sev-medium-bg); --rv-color-variant-error: var(--rv-color-sev-critical); --rv-color-variant-error-bg: var(--rv-color-sev-critical-bg); --rv-color-variant-danger: var(--rv-color-sev-critical); --rv-color-variant-danger-bg: var(--rv-color-sev-critical-bg); /* Text — aliased to canonical so it flips with theme */ --rv-color-text-primary: var(--text); /* was #d8e4f0 */ --rv-color-text-secondary: var(--muted); /* was #8fa3bc */ --rv-color-text-muted: var(--muted); /* was #4e6070 (~7:1) — --faint (2.4:1) failed legibility; --muted keeps it readable in both themes */ --rv-color-text-accent: var(--rv-color-accent); --rv-color-text-on-accent: #000000; /* black on cyan accent — reads on both */ /* Borders — neutral hairlines aliased to flipping line tokens (the old rgba(255,255,255,…) tints vanished on light) */ --rv-color-border: var(--line); /* was rgba(255,255,255,.06) */ --rv-color-border-bright: var(--line2); /* was rgba(255,255,255,.12) */ --rv-color-border-accent: var(--rv-color-accent-border); /* Shadows */ --rv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --rv-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.6); --rv-shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.8); --rv-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.9); --rv-shadow-accent: 0 0 24px rgba(0, 229, 255, 0.15); --rv-shadow-glow: 0 0 40px rgba(0, 229, 255, 0.08); /* ── SPACING — 4-px base grid ──────────────────────────────── */ --rv-space-1: 0.25rem; /* 4px */ --rv-space-2: 0.5rem; /* 8px */ --rv-space-3: 0.75rem; /* 12px */ --rv-space-4: 1rem; /* 16px */ --rv-space-5: 1.25rem; /* 20px */ --rv-space-6: 1.5rem; /* 24px */ --rv-space-8: 2rem; /* 32px */ --rv-space-10: 2.5rem; /* 40px */ --rv-space-12: 3rem; /* 48px */ --rv-space-16: 4rem; /* 64px */ /* ── TYPOGRAPHY ─────────────────────────────────────────────── */ /* Font families */ --rv-font-ui: 'Inter', system-ui, sans-serif; --rv-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font-size scale — F-19 compliance: NOTHING below --rv-fs-xs (≈11px) */ /* html base = 14px; rem values calibrated against that base */ --rv-fs-xs: 0.78rem; /* ≈ 10.9px — FLOOR; never go smaller */ --rv-fs-sm: 0.857rem; /* ≈ 12px */ --rv-fs-base: 1rem; /* 14px */ --rv-fs-md: 1.07rem; /* ≈ 15px */ --rv-fs-lg: 1.14rem; /* 16px */ --rv-fs-xl: 1.28rem; /* 18px */ --rv-fs-2xl: 1.57rem; /* 22px */ --rv-fs-3xl: 2rem; /* 28px */ /* Font weights */ --rv-fw-light: 300; --rv-fw-normal: 400; --rv-fw-medium: 500; --rv-fw-semibold: 600; --rv-fw-bold: 700; /* Line heights */ --rv-lh-tight: 1.25; --rv-lh-normal: 1.5; --rv-lh-loose: 1.75; /* Letter spacing */ --rv-ls-tight: -0.01em; --rv-ls-normal: 0; --rv-ls-wide: 0.04em; --rv-ls-wider: 0.08em; --rv-ls-widest: 0.12em; /* ── BORDER RADIUS ──────────────────────────────────────────── */ --rv-r-none: 0; --rv-r-sm: 2px; --rv-r-base: 4px; --rv-r-md: 6px; --rv-r-lg: 8px; --rv-r-xl: 12px; --rv-r-2xl: 16px; --rv-r-full: 9999px; /* ── ANIMATION ──────────────────────────────────────────────── */ --rv-dur-instant: 80ms; --rv-dur-fast: 150ms; --rv-dur-normal: 220ms; --rv-dur-slow: 350ms; --rv-dur-slower: 500ms; --rv-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* material standard */ --rv-ease-in: cubic-bezier(0.4, 0, 1, 1); --rv-ease-out: cubic-bezier(0, 0, 0.2, 1); --rv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-INDEX LADDER (authoritative — all stacking in one place) ─ Rule: nothing uses a bare integer. Reference these tokens. ─────────────────────────────────────────────────────────────── */ --rv-z-map: 0; /* Leaflet map canvas — always at bottom */ --rv-z-map-overlay: 10; /* Leaflet controls, attribution */ --rv-z-dock: 100; /* Docked side panels */ --rv-z-float: 200; /* Floating/draggable panels */ --rv-z-float-focus: 210; /* Focused float (bring-to-front) */ --rv-z-sheet: 300; /* Full-width/height sheet panels */ --rv-z-panel-layer: 950; /* PanelShell #panel-layer base — must clear the legacy map controls in style.css (#search-container, #map-toolbar, #base-layer-picker, #cesium-*, Leaflet ≤900) that share #main-content's stacking context, while staying below #topbar (style.css z:1000). The layer is pointer-events:none/empty until a panel is open, so this never blocks the map controls. */ --rv-z-topbar: 400; /* Navigation topbar */ --rv-z-sidebar: 410; /* Sidebar nav (above topbar on mobile) */ --rv-z-toast: 1000; /* Toast notifications */ --rv-z-dialog: 1010; /* Modal dialogs */ --rv-z-tooltip: 1020; /* Tooltips (above dialogs) */ /* ── LAYOUT ─────────────────────────────────────────────────── */ --rv-sidebar-w: 252px; --rv-topbar-h: 54px; --rv-panel-min-w: 320px; --rv-panel-max-w: 640px; }