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

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

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

  /* Brand / interactive */
  --primary:      #2563eb;
  --primary-dk:   #1d4ed8;
  --brand-accent: #4338ca;
  --accent:       #4f46e5;
  --accent-vivid: #818cf8;
  --pill-active:  #4f46e5;

  /* Semantic colours */
  --green: #16a34a;
  --amber: #b45309;
  --red:   #b91c1c;

  /* Badge palette */
  --badge-ok-bg: #0596691f;
  --badge-ok-fg: #059669;
  --badge-warn-bg: #d977061f;
  --badge-warn-fg: #d97706;
  --badge-err-bg: #dc26261f;
  --badge-err-fg: #dc2626;
  --badge-pending-bg: #4f46e51f;
  --badge-pending-fg: #4f46e5;

  /* DNS record-type palette */
  --rtype-a-bg: #0596691f;
  --rtype-a-fg: #059669;
  --rtype-aaaa-bg: #0891b21f;
  --rtype-aaaa-fg: #0891b2;
  --rtype-cname-bg: #7c3aed1f;
  --rtype-cname-fg: #7c3aed;
  --rtype-mx-bg: #ea580c1f;
  --rtype-mx-fg: #ea580c;
  --rtype-txt-bg: #0284c71f;
  --rtype-txt-fg: #0284c7;
  --rtype-ns-bg: #65a30d1f;
  --rtype-ns-fg: #65a30d;
  --rtype-soa-bg: #64748b1f;
  --rtype-soa-fg: #64748b;
  --rtype-ptr-bg: #b453091f;
  --rtype-ptr-fg: #b45309;
  --rtype-srv-bg: #be185d1f;
  --rtype-srv-fg: #be185d;

  /* 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:  60px;
  --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: #1f3050;
    --border:      #24334f;

    --primary:      #3b82f6;
    --primary-dk:   #2563eb;
    --brand-accent: #c7d2fe;
    --accent:       #818cf8;
    --accent-vivid: #a5b4fc;
    --pill-active:  #a5b4fc;

    --green: #4ade80;
    --amber: #f59e0b;
    --red:   #f87171;

    --badge-ok-bg: #10b98120;
    --badge-ok-fg: #34d399;
    --badge-warn-bg: #f59e0b20;
    --badge-warn-fg: #fbbf24;
    --badge-err-bg: #ef444420;
    --badge-err-fg: #f87171;
    --badge-pending-bg: #6366f120;
    --badge-pending-fg: #a5b4fc;

    --rtype-a-bg: #10b98120;
    --rtype-a-fg: #34d399;
    --rtype-aaaa-bg: #06b6d420;
    --rtype-aaaa-fg: #22d3ee;
    --rtype-cname-bg: #8b5cf620;
    --rtype-cname-fg: #a78bfa;
    --rtype-mx-bg: #f9731620;
    --rtype-mx-fg: #fb923c;
    --rtype-txt-bg: #0ea5e920;
    --rtype-txt-fg: #38bdf8;
    --rtype-ns-bg: #a3e63520;
    --rtype-ns-fg: #a3e635;
    --rtype-soa-bg: #94a3b820;
    --rtype-soa-fg: #94a3b8;
    --rtype-ptr-bg: #d9770620;
    --rtype-ptr-fg: #fbbf24;
    --rtype-srv-bg: #ec489920;
    --rtype-srv-fg: #f472b6;

    --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: #1f3050;
  --border:      #24334f;

  --primary:      #3b82f6;
  --primary-dk:   #2563eb;
  --brand-accent: #c7d2fe;
  --accent:       #818cf8;
  --accent-vivid: #a5b4fc;
  --pill-active:  #a5b4fc;

  --green: #4ade80;
  --amber: #f59e0b;
  --red:   #f87171;

  --badge-ok-bg: #10b98120;
  --badge-ok-fg: #34d399;
  --badge-warn-bg: #f59e0b20;
  --badge-warn-fg: #fbbf24;
  --badge-err-bg: #ef444420;
  --badge-err-fg: #f87171;
  --badge-pending-bg: #6366f120;
  --badge-pending-fg: #a5b4fc;

  --rtype-a-bg: #10b98120;
  --rtype-a-fg: #34d399;
  --rtype-aaaa-bg: #06b6d420;
  --rtype-aaaa-fg: #22d3ee;
  --rtype-cname-bg: #8b5cf620;
  --rtype-cname-fg: #a78bfa;
  --rtype-mx-bg: #f9731620;
  --rtype-mx-fg: #fb923c;
  --rtype-txt-bg: #0ea5e920;
  --rtype-txt-fg: #38bdf8;
  --rtype-ns-bg: #a3e63520;
  --rtype-ns-fg: #a3e635;
  --rtype-soa-bg: #94a3b820;
  --rtype-soa-fg: #94a3b8;
  --rtype-ptr-bg: #d9770620;
  --rtype-ptr-fg: #fbbf24;
  --rtype-srv-bg: #ec489920;
  --rtype-srv-fg: #f472b6;

  --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:          #f7f8fd;
  --surface:     #ffffff;
  --surface2:    #eef2f8;
  --surface2-hi: #d9e3f0;
  --border:      #d5dde9;

  --primary:      #2563eb;
  --primary-dk:   #1d4ed8;
  --brand-accent: #4338ca;
  --accent:       #4f46e5;
  --accent-vivid: #818cf8;
  --pill-active:  #4f46e5;

  --green: #16a34a;
  --amber: #b45309;
  --red:   #b91c1c;

  --badge-ok-bg: #0596691f;
  --badge-ok-fg: #059669;
  --badge-warn-bg: #d977061f;
  --badge-warn-fg: #d97706;
  --badge-err-bg: #dc26261f;
  --badge-err-fg: #dc2626;
  --badge-pending-bg: #4f46e51f;
  --badge-pending-fg: #4f46e5;

  --rtype-a-bg: #0596691f;
  --rtype-a-fg: #059669;
  --rtype-aaaa-bg: #0891b21f;
  --rtype-aaaa-fg: #0891b2;
  --rtype-cname-bg: #7c3aed1f;
  --rtype-cname-fg: #7c3aed;
  --rtype-mx-bg: #ea580c1f;
  --rtype-mx-fg: #ea580c;
  --rtype-txt-bg: #0284c71f;
  --rtype-txt-fg: #0284c7;
  --rtype-ns-bg: #65a30d1f;
  --rtype-ns-fg: #65a30d;
  --rtype-soa-bg: #64748b1f;
  --rtype-soa-fg: #64748b;
  --rtype-ptr-bg: #b453091f;
  --rtype-ptr-fg: #b45309;
  --rtype-srv-bg: #be185d1f;
  --rtype-srv-fg: #be185d;

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

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