/* ═══════════════════════════════════════════════════════════════════════════
   DNS Panopticon — Design Tokens
   Single source of truth for colours, typography, spacing, and motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Light theme (default) ──────────────────────────────────────────────── */
:root {
  /* Surfaces & backgrounds */
  --bg:          #f5f7fb;
  --surface:     #ffffff;
  --surface2:    #eef2f8;
  --surface2-hi: #e2e8f2;

  /* Borders */
  --border:    #d5dde9;
  --border-hi: #2563eb;

  /* Brand / interactive */
  --primary:      #2563eb;
  --primary-dk:   #1d4ed8;
  --brand-accent: #1e3a8a;
  --accent:       #1d4ed8;
  --pill-active:  #1d4ed8;

  /* Semantic colours */
  --green: #0f766e;
  --amber: #b45309;
  --red:   #b91c1c;

  /* Text hierarchy */
  --txt:   #0b1220;
  --txt-2: #22304a;
  --txt-3: #4e607c;
  --txt-4: #7f90ab;

  /* Special */
  --dz-icon-bg: linear-gradient(135deg, #e6edf9 0%, #dbe6f8 100%);

  /* Layout */
  --nav-height:  52px;
  --content-max: 1280px;

  /* Motion */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

/* ── Dark theme — OS preference (no manual override) ────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a0f1a;
    --surface:     #101727;
    --surface2:    #151f33;
    --surface2-hi: #1c2942;
    --border:      #24334f;

    --primary:      #3b82f6;
    --primary-dk:   #2563eb;
    --brand-accent: #bfdbfe;
    --accent:       #60a5fa;
    --pill-active:  #93c5fd;

    --green: #14b8a6;
    --amber: #f59e0b;
    --red:   #f87171;

    --txt:   #e7eefb;
    --txt-2: #b5c5e1;
    --txt-3: #7d92b5;
    --txt-4: #5b6f92;

    --dz-icon-bg: linear-gradient(135deg, #16233b 0%, #1d2f4d 100%);
  }
}

/* ── Dark theme — manual toggle ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0a0f1a;
  --surface:     #101727;
  --surface2:    #151f33;
  --surface2-hi: #1c2942;
  --border:      #24334f;

  --primary:      #3b82f6;
  --primary-dk:   #2563eb;
  --brand-accent: #bfdbfe;
  --accent:       #60a5fa;
  --pill-active:  #93c5fd;

  --green: #14b8a6;
  --amber: #f59e0b;
  --red:   #f87171;

  --txt:   #e7eefb;
  --txt-2: #b5c5e1;
  --txt-3: #7d92b5;
  --txt-4: #5b6f92;

  --dz-icon-bg: linear-gradient(135deg, #16233b 0%, #1d2f4d 100%);
}

/* ── Force light theme ───────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #f5f7fb;
  --surface:     #ffffff;
  --surface2:    #eef2f8;
  --surface2-hi: #e2e8f2;
  --border:      #d5dde9;

  --primary:      #2563eb;
  --primary-dk:   #1d4ed8;
  --brand-accent: #1e3a8a;
  --accent:       #1d4ed8;
  --pill-active:  #1d4ed8;

  --green: #0f766e;
  --amber: #b45309;
  --red:   #b91c1c;

  --txt:   #0b1220;
  --txt-2: #22304a;
  --txt-3: #4e607c;
  --txt-4: #7f90ab;

  --dz-icon-bg: linear-gradient(135deg, #e6edf9 0%, #dbe6f8 100%);
}