/* ============================================================
   Corrosion Control — Color System
   ------------------------------------------------------------
   Three layers:
   1. Raw neutral ramp (absolute; identical in both themes)
   2. Semantic surface / text / border tokens (flip per theme)
   3. Status colors (online/offline/warn/info/...) — game-agnostic
   Game ACCENT colors live in game-themes.css.

   Theme + game are set together on <html>:
     <html data-theme="dark" data-game="rust">
   Dark is primary. Light is full-parity.
   ============================================================ */

:root {
  /* ---- Raw neutral ramp (warm-cool slate, absolute) ---- */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f3f5f7;
  --n-100: #e8ebef;
  --n-150: #dce0e6;
  --n-200: #ccd2da;
  --n-300: #aeb6c1;
  --n-400: #8a929e;
  --n-500: #6b7280;
  --n-600: #515862;
  --n-650: #444a53;
  --n-700: #363b43;
  --n-750: #2b2f36;
  --n-800: #1f2329;
  --n-850: #181b20;
  --n-900: #121419;
  --n-925: #0e0f13;
  --n-950: #0a0b0e;
  --n-975: #060709;

  /* ---- Semantic: DARK (default) ---- */
  --surface-canvas:  var(--n-950);   /* app background */
  --surface-sunken:  var(--n-975);   /* wells, deep insets */
  --surface-base:    var(--n-925);   /* primary panels */
  --surface-raised:  var(--n-850);   /* cards, rows */
  --surface-raised-2:var(--n-800);   /* nested cards, hover cards */
  --surface-overlay: var(--n-800);   /* menus, popovers, dialogs */
  --surface-inset:   #07080a;        /* inputs, console, code */
  --surface-hover:   rgba(255, 255, 255, 0.045);
  --surface-active:  rgba(255, 255, 255, 0.075);
  --surface-selected:rgba(255, 255, 255, 0.06);

  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.16);

  --text-primary:    #f2f4f7;
  --text-secondary:  #aeb4bf;
  --text-tertiary:   #767d89;
  --text-muted:      #565d68;
  --text-inverse:    #0a0b0e;
  --text-on-accent:  var(--accent-contrast);

  /* Scrim for modals / image overlays */
  --scrim: rgba(4, 5, 7, 0.66);

  /* ---- Status / semantic (consistent across themes) ---- */
  --status-online:        #36c780;
  --status-online-soft:   rgba(54, 199, 128, 0.14);
  --status-online-border: rgba(54, 199, 128, 0.38);

  --status-offline:        #e5484d;
  --status-offline-soft:   rgba(229, 72, 77, 0.14);
  --status-offline-border: rgba(229, 72, 77, 0.40);

  --status-warn:        #e8a33c;
  --status-warn-soft:   rgba(232, 163, 60, 0.15);
  --status-warn-border: rgba(232, 163, 60, 0.40);

  --status-info:        #4c8df0;
  --status-info-soft:   rgba(76, 141, 240, 0.15);
  --status-info-border: rgba(76, 141, 240, 0.40);

  --status-starting:        #2bc2d4;  /* booting / updating / restarting */
  --status-starting-soft:   rgba(43, 194, 212, 0.15);
  --status-starting-border: rgba(43, 194, 212, 0.40);

  --status-wiping:        #9b7bf0;    /* Rust map wipe / maintenance */
  --status-wiping-soft:   rgba(155, 123, 240, 0.16);
  --status-wiping-border: rgba(155, 123, 240, 0.40);

  /* Aliases used by components */
  --success: var(--status-online);
  --danger:  var(--status-offline);
  --warning: var(--status-warn);
  --info:    var(--status-info);

  /* Data-viz categorical (ECharts-friendly) */
  --viz-1: var(--accent);
  --viz-2: #4c8df0;
  --viz-3: #36c780;
  --viz-4: #9b7bf0;
  --viz-5: #2bc2d4;
  --viz-6: #e8a33c;
  --viz-grid: var(--border-subtle);
}

/* ---- Semantic: LIGHT (full parity) ---- */
[data-theme="light"] {
  --surface-canvas:  #f5f6f8;
  --surface-sunken:  #eceef1;
  --surface-base:    #ffffff;
  --surface-raised:  #ffffff;
  --surface-raised-2:#fbfcfd;
  --surface-overlay: #ffffff;
  --surface-inset:   #f1f3f5;
  --surface-hover:   rgba(12, 16, 22, 0.04);
  --surface-active:  rgba(12, 16, 22, 0.07);
  --surface-selected:rgba(12, 16, 22, 0.05);

  --border-subtle:   rgba(12, 16, 22, 0.07);
  --border-default:  rgba(12, 16, 22, 0.12);
  --border-strong:   rgba(12, 16, 22, 0.20);

  --text-primary:    #14171c;
  --text-secondary:  #474e58;
  --text-tertiary:   #6b727e;
  --text-muted:      #969ca6;
  --text-inverse:    #ffffff;

  --scrim: rgba(16, 20, 28, 0.45);

  /* Status soft fills need a touch more alpha on light */
  --status-online-soft:   rgba(33, 160, 98, 0.12);
  --status-offline-soft:  rgba(206, 44, 49, 0.10);
  --status-warn-soft:     rgba(193, 124, 18, 0.13);
  --status-info-soft:     rgba(43, 105, 214, 0.10);
  --status-starting-soft: rgba(18, 150, 168, 0.12);
  --status-wiping-soft:   rgba(118, 86, 214, 0.12);
}
