/* BlurredBox AGD — design tokens
   Dark-first "Signal Blue" palette. Light theme via [data-theme="light"].
   Density: compact ops-terminal. Swap the spacing scale for a future
   "comfortable" mode. */

:root {
  /* ---- Surfaces (dark) ---- */
  --bg:            #0B0E14;
  --bg-raised:     #0F1420;
  --surface:       #131826;
  --surface-2:     #1A2132;
  --surface-3:     #212A40;
  --border:        #232C42;
  --border-strong: #33405F;

  /* ---- Text ---- */
  --text:       #E6ECF7;
  --text-dim:   #8FA3C8;
  --text-faint: #5C6C8C;

  /* ---- Brand / accents ---- */
  --accent:      #4C7DF0;
  --accent-hi:   #7FA5EF;
  --accent-dim:  rgba(76, 125, 240, 0.14);
  --brand-grad:  linear-gradient(135deg, #7B4CF0 0%, #4C7DF0 100%);

  --ok:     #2AC28E;
  --warn:   #E0B341;
  --danger: #E5484D;
  --ok-dim:     rgba(42, 194, 142, 0.13);
  --warn-dim:   rgba(224, 179, 65, 0.13);
  --danger-dim: rgba(229, 72, 77, 0.13);

  /* ---- Outcome severity ramp (fixed semantic order) ----
     allow → alert → throttle → restart → restrict → rollback → hard_block */
  --o-allow:      #5B6472;
  --o-alert:      #7FA5EF;
  --o-throttle:   #E0C341;
  --o-restart:    #E8A33D;
  --o-restrict:   #E0763A;
  --o-rollback:   #E5484D;
  --o-hard-block: #C11E2B;
  --o-start-new:  #2AC28E;
  --o-kill-old:   #8A7FD6;

  /* On-chip text colors (AA on the chip fill) */
  --o-allow-fg:      #C6CDD8;
  --o-alert-fg:      #B9CFF7;
  --o-throttle-fg:   #EDD98A;
  --o-restart-fg:    #F0C687;
  --o-restrict-fg:   #EFA97E;
  --o-rollback-fg:   #F19A9D;
  --o-hard-block-fg: #F58B92;
  --o-start-new-fg:  #8FE0C4;
  --o-kill-old-fg:   #C3BCEC;

  /* ---- Model status ladder ---- */
  --s-healthy:   var(--ok);
  --s-degrading: var(--warn);
  --s-imminent:  #E0763A;
  --s-blocked:   var(--danger);

  /* ---- Trust score bands ---- */
  --trust-hi:  var(--ok);
  --trust-mid: var(--warn);
  --trust-lo:  var(--danger);

  /* ---- Type ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
             "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
               monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;   /* data type */
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-kpi: 28px;

  /* ---- Spacing (compact) ---- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;

  --row-h: 34px;            /* dense table row */
  --rail-w: 208px;
  --topbar-h: 44px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* chart internals (read by charts.js via getComputedStyle) */
  --chart-grid: rgba(143, 163, 200, 0.12);
  --chart-band: rgba(76, 125, 240, 0.16);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #F2F4FA;
  --bg-raised:     #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #EBEFF7;
  --surface-3:     #DFE5F1;
  --border:        #D4DBEA;
  --border-strong: #B4BFD8;

  --text:       #17202F;
  --text-dim:   #51617F;
  --text-faint: #7C8AA5;

  --accent:     #2F5FD6;
  --accent-hi:  #2F5FD6;
  --accent-dim: rgba(47, 95, 214, 0.10);

  --ok:     #0E9A6C;
  --warn:   #A97B0A;
  --danger: #CE2C31;
  --ok-dim:     rgba(14, 154, 108, 0.10);
  --warn-dim:   rgba(169, 123, 10, 0.10);
  --danger-dim: rgba(206, 44, 49, 0.10);

  --o-allow:      #6B7480;
  --o-alert:      #2F5FD6;
  --o-throttle:   #9A7B00;
  --o-restart:    #A96A0A;
  --o-restrict:   #B54E14;
  --o-rollback:   #CE2C31;
  --o-hard-block: #9E1219;
  --o-start-new:  #0E9A6C;
  --o-kill-old:   #5D4FB8;

  --o-allow-fg:      #444C57;
  --o-alert-fg:      #24449C;
  --o-throttle-fg:   #6D5700;
  --o-restart-fg:    #7C4E06;
  --o-restrict-fg:   #86390D;
  --o-rollback-fg:   #9A2125;
  --o-hard-block-fg: #7D0E14;
  --o-start-new-fg:  #0A6E4D;
  --o-kill-old-fg:   #453A8E;

  --s-imminent: #B54E14;

  --shadow: 0 4px 16px rgba(23, 32, 47, 0.10);
  --shadow-pop: 0 8px 32px rgba(23, 32, 47, 0.18);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --chart-grid: rgba(81, 97, 127, 0.14);
  --chart-band: rgba(47, 95, 214, 0.12);

  color-scheme: light;
}