:root{
  /* ---------- Light (default): "daylight" — dashboards, docs, marketing ---------- */
  --surface-page:var(--graphite-25);
  --surface-card:var(--graphite-0);
  --surface-raised:var(--graphite-0);
  --surface-sunken:var(--graphite-50);
  --surface-inverse:var(--graphite-900);
  --surface-hover:var(--graphite-50);
  --surface-active:var(--graphite-100);
  --surface-selected:var(--navy-50);
  --surface-disabled:var(--graphite-50);
  --surface-code:var(--graphite-900);

  --border-subtle:var(--graphite-100);
  --border-default:var(--graphite-200);
  --border-strong-c:var(--graphite-300);
  --border-focus:var(--navy-700);
  --border-inverse:rgba(255,255,255,.14);

  --text-heading:var(--graphite-900);
  --text-body:var(--graphite-700);
  --text-muted:var(--graphite-500);
  --text-faint:var(--graphite-400);
  --text-inverse:var(--graphite-0);
  --text-inverse-muted:rgba(255,255,255,.66);
  --text-link:var(--navy-700);
  --text-link-hover:var(--navy-900);
  --text-on-accent:var(--graphite-0);
  --text-on-signal:var(--graphite-900);

  --accent:var(--navy-700);
  --accent-hover:var(--navy-800);
  --accent-active:var(--navy-900);
  --accent-soft:var(--navy-50);
  --accent-signal:var(--amber-500);
  --accent-signal-hover:var(--amber-600);

  --focus-ring:0 0 0 var(--focus-ring-w) var(--graphite-0),0 0 0 4px var(--navy-400);
}

[data-theme="dark"]{
  /* ---------- Dark: "operations" — NOC walls, device consoles, telemetry ---------- */
  --surface-page:var(--graphite-950);
  --surface-card:var(--graphite-900);
  --surface-raised:var(--graphite-800);
  --surface-sunken:#070a0d;
  --surface-inverse:var(--graphite-0);
  --surface-hover:rgba(255,255,255,.04);
  --surface-active:rgba(255,255,255,.08);
  --surface-selected:rgba(79,104,180,.22);
  --surface-disabled:rgba(255,255,255,.04);
  --surface-code:#070a0d;

  --border-subtle:rgba(255,255,255,.08);
  --border-default:rgba(255,255,255,.14);
  --border-strong-c:rgba(255,255,255,.24);
  --border-focus:var(--navy-300);
  --border-inverse:var(--graphite-200);

  --text-heading:#f4f7fa;
  --text-body:var(--graphite-200);
  --text-muted:var(--graphite-300);
  --text-faint:var(--graphite-400);
  --text-inverse:var(--graphite-900);
  --text-inverse-muted:var(--graphite-600);
  --text-link:var(--amber-300);
  --text-link-hover:var(--amber-200);
  --text-on-accent:var(--graphite-0);
  --text-on-signal:var(--graphite-900);

  --accent:var(--navy-300);
  --accent-hover:var(--navy-200);
  --accent-active:var(--navy-400);
  --accent-soft:rgba(79,104,180,.2);

  --state-online-soft:rgba(29,143,104,.18);
  --state-warning-soft:rgba(217,102,13,.18);
  --state-fault-soft:rgba(201,48,44,.18);
  --state-info-soft:rgba(79,104,180,.2);
  --state-offline-soft:rgba(255,255,255,.08);

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 4px 12px -2px rgba(0,0,0,.55);
  --shadow-lg:0 16px 32px -8px rgba(0,0,0,.6);
  --shadow-overlay:0 28px 64px -16px rgba(0,0,0,.7);
  --focus-ring:0 0 0 var(--focus-ring-w) var(--graphite-950),0 0 0 4px var(--navy-300);
}