/* Seerflow brand design tokens — dark-first, single indigo accent.
   OKLCH for CSS; --sf-hex-* mirror for JS/canvas (Plotly cannot parse oklch).
   Generated hex via scripts/gen_brand_hex.py. */

:root,
[data-md-color-scheme="slate"] {
  /* ink (dark) */
  --bg:        oklch(0.145 0.012 250);
  --surface:   oklch(0.175 0.012 250);
  --surface-2: oklch(0.205 0.014 250);
  --surface-3: oklch(0.245 0.014 250);
  --line:      oklch(0.275 0.012 250);
  --line-2:    oklch(0.345 0.012 250);
  --text:      oklch(0.965 0.005 250);
  --text-2:    oklch(0.795 0.008 250);
  --text-3:    oklch(0.620 0.010 250);
  --mute:      oklch(0.500 0.010 250);
  /* accent + semantic */
  --accent:    oklch(0.745 0.130 283);
  --accent-2:  oklch(0.620 0.140 283);
  --accent-ink:oklch(0.16 0.05 283);
  --warn:      oklch(0.815 0.155 80);
  --crit:      oklch(0.725 0.195 25);
  --info:      oklch(0.795 0.115 235);

  /* dark hex mirror */
  --sf-hex-bg: #070b0f;
  --sf-hex-surface: #0d1116;
  --sf-hex-surface-2: #12181d;
  --sf-hex-line: #23282d;
  --sf-hex-line-2: #353a3f;
  --sf-hex-text: #f1f4f7;
  --sf-hex-text-2: #b8bdc1;
  --sf-hex-text-3: #82878c;
  --sf-hex-accent: #a1a1fc;
  --sf-hex-accent-2: #7c79d7;
  --sf-hex-warn: #f6b632;
  --sf-hex-crit: #ff6a65;
  --sf-hex-info: #6bc8fb;

  /* type + geometry */
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px;

  /* viz var namespace (read by plotly-charts.js / entity-graph.js via getComputedStyle).
     Aliased to the hex mirror so the computed value is a literal hex. */
  --sf-viz-fg:       var(--sf-hex-text);
  --sf-viz-muted:    var(--sf-hex-text-3);
  --sf-viz-border:   var(--sf-hex-line-2);
  --sf-viz-panel-bg: var(--sf-hex-surface-2);
  --sf-viz-panel-fg: var(--sf-hex-text);
  --sf-viz-bg:       transparent;
  --sf-baseline:     var(--sf-hex-accent);
  --sf-threshold:    var(--sf-hex-warn);
  --sf-anomaly:      var(--sf-hex-crit);
  --sf-edge:         var(--sf-hex-line-2);
  --sf-edge-highlight: var(--sf-hex-text-2);
  /* entity node hues (categorical, brand-tinted, kept distinguishable) */
  --sf-entity-user:    var(--sf-hex-accent);
  --sf-entity-host:    var(--sf-hex-info);
  --sf-entity-ip:      var(--sf-hex-warn);
  --sf-entity-process: var(--sf-hex-accent-2);
  --sf-entity-file:    var(--sf-hex-text-2);
  --sf-entity-domain:  var(--sf-hex-crit);
}

[data-md-color-scheme="default"] {
  /* paper (light flavor) */
  --bg:        oklch(0.985 0.003 95);
  --surface:   oklch(0.965 0.004 95);
  --surface-2: oklch(0.935 0.005 95);
  --surface-3: oklch(0.905 0.006 95);
  --line:      oklch(0.895 0.006 95);
  --line-2:    oklch(0.815 0.008 95);
  --text:      oklch(0.205 0.014 250);
  --text-2:    oklch(0.405 0.012 250);
  --text-3:    oklch(0.510 0.010 250);
  --mute:      oklch(0.640 0.008 250);
  --accent:    oklch(0.480 0.180 283);
  --accent-2:  oklch(0.395 0.180 283);
  --accent-ink:oklch(0.985 0.003 95);
  --warn:      oklch(0.540 0.165 65);
  --crit:      oklch(0.555 0.215 26);
  --info:      oklch(0.520 0.150 235);

  /* light hex mirror */
  --sf-hex-bg: #fbfaf8;
  --sf-hex-surface: #f4f3f0;
  --sf-hex-surface-2: #eae9e6;
  --sf-hex-line: #dddcd8;
  --sf-hex-line-2: #c4c2bd;
  --sf-hex-text: #12181d;
  --sf-hex-text-2: #444a4f;
  --sf-hex-text-3: #62676c;
  --sf-hex-accent: #5546bd;
  --sf-hex-accent-2: #402aa1;
  --sf-hex-warn: #ad5300;
  --sf-hex-crit: #d41824;
  --sf-hex-info: #0073b2;
}