spaxel/dashboard/css/tokens.css

/* ───────────────────────────────────────────────────────────────
   Spaxel Design System — Radix Dark Tokens (§8e)
   Single source of truth for all dashboard surfaces.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Radix Slate (dark) ── */
  --slate-1:  #111113;
  --slate-2:  #18191b;
  --slate-3:  #1e2024;
  --slate-4:  #262830;
  --slate-5:  #2e3039;
  --slate-6:  #363842;
  --slate-7:  #43454f;
  --slate-8:  #565867;
  --slate-9:  #6b6e7b;
  --slate-10: #7c7f8c;
  --slate-11: #9b9daa;
  --slate-12: #ededf0;

  /* ── Radix Blue (accent) ── */
  --blue-1:  #11181e;
  --blue-2:  #152233;
  --blue-3:  #1a2e47;
  --blue-4:  #1e3a5f;
  --blue-5:  #224777;
  --blue-6:  #26558f;
  --blue-7:  #2e6aad;
  --blue-8:  #3579c5;
  --blue-9:  #3e96e8;
  --blue-10: #4daaf5;
  --blue-11: #68bdfa;
  --blue-12: #aedcff;

  /* ── Semantic state ── */
  --ok:   #46a758;   /* green-9 */
  --warn: #e5a00d;   /* amber-9 */
  --alert: #e5484d;  /* red-9  */
  --orange: #e5780d; /* orange-9 (GDOP fair) */

  /* ── Semantic aliases ── */
  --color-success: var(--ok);
  --color-warning: var(--warn);
  --color-danger:  var(--alert);
  --color-primary: var(--blue-9);
  --color-primary-hover: var(--blue-10);

  /* ── State with opacity (for badges, backgrounds) ── */
  --ok-bg:        rgba(70, 167, 88, 0.15);
  --ok-muted:     rgba(70, 167, 88, 0.2);
  --ok-border:    rgba(70, 167, 88, 0.3);
  --warn-bg:      rgba(229, 160, 13, 0.15);
  --warn-muted:   rgba(229, 160, 13, 0.2);
  --warn-border:  rgba(229, 160, 13, 0.3);
  --alert-bg:     rgba(229, 72, 77, 0.15);
  --alert-muted:  rgba(229, 72, 77, 0.2);
  --alert-border: rgba(229, 72, 77, 0.3);
  --blue-muted:   rgba(62, 150, 232, 0.15);
  --blue-border:  rgba(62, 150, 232, 0.3);

  /* ── Background steps ── */
  --bg-page:   var(--slate-2);
  --bg-card:   var(--slate-3);
  --bg-panel:  var(--slate-3);
  --bg-hover:  var(--slate-4);
  --bg-active: var(--slate-5);
  --bg-input:  var(--slate-4);

  /* ── Text ── */
  --text-primary:   var(--slate-12);
  --text-secondary: var(--slate-11);
  --text-muted:     var(--slate-9);
  --text-on-accent: #fff;

  /* ── Border ── */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-strong:  rgba(255, 255, 255, 0.15);

  /* ── Typography ── */
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  --text-3xs:  10px;
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   15px;
  --text-lg:   20px;
  --text-xl:   18px;
  --text-2xl:  28px;
  --text-3xl:  24px;
  --text-4xl:  32px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  --lh-body:    1.5;
  --lh-heading: 1.2;
  --fw-body:    400;
  --fw-heading: 600;

  /* ── Spacing (4 px grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ── */
  --radius-control: 6px;
  --radius-card:    10px;
  --radius-modal:   16px;
  --radius-pill:    9999px;

  /* ── Shadows (flat elevation, no drop shadows per §8e) ── */
  --shadow:     0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 8px 32px rgba(0, 0, 0, 0.5);

  /* ── Overlays ── */
  --overlay:        rgba(0, 0, 0, 0.5);
  --overlay-strong: rgba(0, 0, 0, 0.7);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* ── Section tints (briefing, guided-help) ── */
  --section-sleep-bg:    rgba(70, 167, 88, 0.1);
  --section-people-bg:   rgba(62, 150, 232, 0.1);
  --section-anomaly-bg:  rgba(229, 160, 13, 0.1);
  --section-health-bg:   rgba(155, 157, 170, 0.1);
  --section-predict-bg:  rgba(62, 150, 232, 0.1);
  --section-learn-bg:    rgba(229, 160, 13, 0.1);
  --section-portal-bg:   rgba(62, 150, 232, 0.15);
  --section-privacy-bg:  rgba(62, 150, 232, 0.1);
  --section-privacy-border: rgba(62, 150, 232, 0.2);

  /* ── Spinner track ── */
  --spinner-track: rgba(62, 150, 232, 0.2);

  /* ── Subtle highlight (replaces rgba(255,255,255,0.07)) ── */
  --highlight-subtle: rgba(255, 255, 255, 0.07);

  /* ── Dark overlay panels (replaces rgba(0,0,0,0.9)) ── */
  --overlay-panel: rgba(0, 0, 0, 0.9);

  /* ── Card frosted bg (replaces rgba(30,32,36,0.95)) ── */
  --bg-frosted: rgba(30, 32, 36, 0.95);
  --bg-frosted-strong: rgba(30, 32, 36, 0.98);

  /* ── Selected row highlight ── */
  --row-selected: rgba(62, 150, 232, 0.18);

  /* ── Live view overlays ── */
  --live-status-bg:    rgba(0, 0, 0, 0.85);
  --live-panel-bg:     rgba(0, 0, 0, 0.8);
  --live-chart-bg:     rgba(0, 0, 0, 0.8);
  --live-node-bg:      rgba(0, 0, 0, 0.8);
  --live-presence-bg:  rgba(0, 0, 0, 0.8);

  /* ── Inline-element opacity levels ── */
  --opacity-subtle:    0.03;
  --opacity-light:     0.05;
  --opacity-soft:      0.08;
  --opacity-mid:       0.1;
  --opacity-medium:    0.12;
  --opacity-strong:    0.15;

  /* ── Accent interaction bg (blue tinted) ── */
  --blue-interact-bg:  rgba(62, 150, 232, 0.2);
  --blue-interact-border: rgba(62, 150, 232, 0.5);
  --blue-interact-active: rgba(62, 150, 232, 0.25);

  /* ── Stationary badge ── */
  --stationary-bg:     rgba(62, 150, 232, 0.25);

  /* ── Green glow dot ── */
  --ok-glow:           rgba(70, 167, 88, 0.5);

  /* ── Letter-spacing ── */
  --ls-wide: 1px;

  /* ── Component sizes ── */
  --size-icon-sm:   16px;
  --size-icon:      18px;
  --size-icon-md:   20px;
  --size-icon-lg:   24px;
  --size-icon-xl:   28px;
  --size-icon-2xl:  32px;
  --size-touch:     44px;
  --size-header:    56px;
  --size-sidebar:   360px;
}