/* ==========================================================================
   KSM168 Electrical — design tokens
   Satu sumber nilai desain. Komponen hanya memakai token semantik (var(--…)),
   bukan warna mentah. Tema: light (default), dark ([data-theme="dark"] atau
   [data-theme="system"] + OS gelap), kontras tinggi ([data-contrast="high"]).
   Dokumentasi: devneeds/FRONTEND.md
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Palet dasar: netral (slate) ---------------------------------- */
  --n-0: #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f8fafc;
  --n-75: #f3f5f8;
  --n-100: #eef2f6;
  --n-150: #e6ebf1;
  --n-200: #dfe5ec;
  --n-300: #c9d2dd;
  --n-400: #8691a3;
  --n-500: #6b7588;
  --n-600: #5b6678;
  --n-700: #3f4a5c;
  --n-800: #253043;
  --n-900: #0f172a;
  --n-950: #070b14;

  /* ---- Palet dasar: aksen (biru) ------------------------------------ */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* ---- Palet dasar: status (hanya untuk status) --------------------- */
  --green-50: #ecfdf3;
  --green-200: #a9e5bf;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-900: #14532d;
  --amber-50: #fff7ed;
  --amber-200: #f6cf8e;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-900: #78350f;
  --red-50: #fef2f2;
  --red-200: #f7b9b9;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-900: #7f1d1d;

  /* ---- Permukaan ---------------------------------------------------- */
  --bg: var(--n-75);                 /* kanvas halaman */
  --surface: var(--n-0);             /* kartu, panel, input */
  --bg-elev: var(--surface);         /* elemen melayang: menu, dialog, sheet */
  --surface-2: var(--n-50);          /* isian halus: header tabel, hover baris */
  --surface-3: var(--n-100);         /* track segmented, tombol sekunder ditekan */
  --surface-inverse: var(--n-900);   /* tooltip, toast gelap */
  --text-inverse: var(--n-50);
  --overlay: rgba(15, 23, 42, 0.48); /* backdrop dialog/sheet */

  /* ---- Garis -------------------------------------------------------- */
  --border: var(--n-200);            /* hairline kartu & pemisah (dekoratif) */
  --border-strong: var(--n-300);     /* pemisah yang perlu terlihat */
  --border-control: var(--n-400);    /* batas input/kontrol, >= 3:1 */
  --border-hover: var(--n-500);
  --border-width: 1px;

  /* ---- Teks --------------------------------------------------------- */
  --text: var(--n-900);
  --text-muted: var(--n-600);
  --text-subtle: #646e81;            /* placeholder, metadata sekunder (≥ 4,5:1 di bg & surface-2/3) */
  --text-disabled: #9aa3b2;
  --heading: var(--n-900);

  /* ---- Aksen -------------------------------------------------------- */
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-active: var(--blue-800);
  --accent-fg: #ffffff;              /* teks di atas aksen solid */
  --accent-text: var(--blue-600);    /* tautan & teks aksen di permukaan */
  --accent-text-strong: var(--blue-700);
  --accent-subtle: var(--blue-50);   /* isi keadaan terpilih */
  --accent-subtle-hover: var(--blue-100);
  --accent-border: var(--blue-600);  /* border keadaan terpilih */
  --accent-muted: var(--blue-200);

  /* ---- Aksi berbahaya (tombol hapus) --------------------------------- */
  --danger: var(--red-600);
  --danger-hover: var(--red-700);
  --danger-active: var(--red-900);
  --danger-fg: #ffffff;

  /* ---- Fokus -------------------------------------------------------- */
  --focus-ring: var(--blue-600);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-halo: 0 0 0 3px rgba(37, 99, 235, 0.28);

  /* ---- Status (kontrak: --status-<x>, -bg, -border, -fg, -solid) ---- */
  --status-ok: var(--green-600);
  --status-ok-solid: var(--green-700);   /* teks putih di atasnya ≥ 4,5:1 */
  --status-ok-solid-fg: #ffffff;
  --status-ok-fg: var(--green-700);
  --status-ok-bg: var(--green-50);
  --status-ok-border: var(--green-200);

  --status-warn: var(--amber-600);
  --status-warn-solid: var(--amber-700); /* teks putih di atasnya ≥ 4,5:1 */
  --status-warn-solid-fg: #ffffff;
  --status-warn-fg: var(--amber-700);
  --status-warn-bg: var(--amber-50);
  --status-warn-border: var(--amber-200);

  --status-crit: var(--red-600);
  --status-crit-solid: var(--red-600);
  --status-crit-solid-fg: #ffffff;
  --status-crit-fg: var(--red-700);
  --status-crit-bg: var(--red-50);
  --status-crit-border: var(--red-200);

  --status-none: var(--n-400);
  --status-none-solid: #94a3b8;
  --status-none-solid-fg: var(--n-900);
  --status-none-fg: #475569;
  --status-none-bg: var(--n-100);
  --status-none-border: var(--n-200);

  --status-info: var(--blue-600);
  --status-info-solid: var(--blue-600);
  --status-info-solid-fg: #ffffff;
  --status-info-fg: var(--blue-700);
  --status-info-bg: var(--blue-50);
  --status-info-border: var(--blue-200);

  /* ---- Ilustrasi alat ----------------------------------------------- */
  --ill-stroke: #4b5870;
  --ill-body: #e3e9f0;
  --ill-body-2: #cfd8e3;
  --ill-door: #f4f7fa;
  --ill-detail: #9aa6b8;
  --ill-glass: #ffffff;
  --ill-fan: #5b6678;
  --ill-shadow: rgba(15, 23, 42, 0.1);
  --ill-accent: var(--blue-600);
  --ill-lamp-none: #a7b1c0;
  --ill-lamp-ok: var(--green-500);
  --ill-lamp-warn: var(--amber-500);
  --ill-lamp-crit: var(--red-600);
  --ill-trouble-body: #fbe1e1;
  --ill-trouble-stroke: var(--red-700);

  /* ---- Peta rute & garis aliran ------------------------------------- */
  --map-bg: var(--n-50);
  --map-grid: #d5dce6;
  --flow-line: #aab4c3;
  --flow-line-active: var(--blue-500);

  /* ---- Grafik: warna kategori seri (bukan hijau/kuning/merah = tingkat) ----
     Aman buta warna: ΔE ≥ 15 antar-pasangan pada simulasi protan/deutan/tritan,
     kontras ≥ 3:1 terhadap --surface. Urutan dipakai berurutan per seri. */
  --chart-1: #343af4;
  --chart-2: #4791d1;
  --chart-3: #975ff7;
  --chart-4: #6119b3;
  --chart-5: #818fa2;
  --chart-6: #124b7d;

  /* ---- Skeleton ----------------------------------------------------- */
  --skeleton-base: var(--n-150);
  --skeleton-shine: rgba(255, 255, 255, 0.65);

  /* ---- Bayangan (minimal) ------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.24), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 24px 64px -16px rgba(15, 23, 42, 0.32);

  /* ---- Tipografi ---------------------------------------------------- */
  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
    monospace;
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-body: var(--text-md);
  --input-font: var(--text-body);
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---- Spasi (grid 4px) --------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */

  /* ---- Radius ------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;
  --radius: var(--radius-lg);        /* kontrol: tombol, input */
  --radius-card: var(--radius-xl);   /* kartu, panel, dialog */

  /* ---- Lapisan z-index ---------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-sidebar: 250;
  --z-bottomnav: 300;
  --z-submitbar: 310;
  --z-slideover: 350;
  --z-dropdown: 400;
  --z-overlay: 500;
  --z-sheet: 600;
  --z-dialog: 700;
  --z-toast: 800;
  --z-tooltip: 900;
  --z-banner: 950;
  --z-progress: 1000;

  /* ---- Gerak (semua menjadi 0ms bila prefers-reduced-motion) -------- */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.15);
  --ill-fan-duration: 1.1s;
  --ill-blink-duration: 1s;
  --flow-duration: 0.9s;

  /* ---- Ukuran tata letak -------------------------------------------- */
  --touch: 44px;
  --control-h: 2.5rem;         /* 40px; 44px di perangkat sentuh & UI mobile/easy */
  --control-h-sm: 2rem;        /* 32px */
  --control-h-lg: 3rem;        /* 48px */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --mheader-h: 56px;
  --easybar-h: 60px;
  --bottomnav-h: 64px;
  --submitbar-h: 72px;
  --banner-h: 40px;
  --content-max: 1440px;
  --form-max: 720px;
  --gutter: var(--space-4);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --console-strip-h: 36px;
  --easy-strip-h: 2.25rem;     /* strip progres rute Easy UI di bawah easy-bar (< 640px) */
  --offline-h: 0px;            /* tinggi banner offline saat tampil (html.is-offline) */
  --imp-h: 0px;                /* tinggi banner impersonate saat tampil */
  --header-offset: 0px;        /* dihitung ulang di body (layouts.css) */
}

/* Ukuran dasar teks & kontrol per tampilan (data-ui di <html>) */
:root[data-ui="admin"],
:root[data-ui="console"] {
  --text-body: var(--text-sm);
}
:root[data-ui="mobile"] {
  --control-h: 2.75rem;
  --control-h-sm: 2.75rem;
  --input-font: max(1rem, 16px);
}
:root[data-ui="easy"] {
  --control-h: 2.75rem;
  --control-h-sm: 2.75rem;     /* Easy UI juga dipakai di HP: kontrol kecil (chip kalimat cepat) tetap ≥ 44px */
  --input-font: max(1rem, 16px);
}
@media (pointer: coarse) {
  :root {
    --control-h: 2.75rem;
    --control-h-sm: 2.5rem;
    --input-font: max(1rem, 16px);
  }
}
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
  }
}

/* ==========================================================================
   Tema gelap — [data-theme="dark"], atau "system"/tanpa atribut + OS gelap.
   Blok di bawah sengaja kembar (CSS murni tanpa build step).
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b111d;
  --surface: #121a2a;
  --bg-elev: #172033;
  --surface-2: #162034;
  --surface-3: #1c2639;
  --surface-inverse: #e6ebf2;
  --text-inverse: #0f172a;
  --overlay: rgba(2, 6, 14, 0.66);
  --border: #222d42;
  --border-strong: #2e3a52;
  --border-control: #5f6f8a;
  --border-hover: #7a8aa5;
  --text: #e6ebf2;
  --text-muted: #9aa6b8;
  --text-subtle: #8692a8;
  --text-disabled: #566279;
  --heading: #f1f5f9;
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-active: var(--blue-700);
  --accent-fg: #ffffff;
  --accent-text: #6ea8fe;
  --accent-text-strong: #9ec5ff;
  --accent-subtle: #16274a;
  --accent-subtle-hover: #1b3260;
  --accent-border: #4d8ef7;
  --accent-muted: #284a86;
  --focus-ring: #6ea8fe;
  --focus-halo: 0 0 0 3px rgba(110, 168, 254, 0.35);
  --status-ok: var(--green-500);
  --status-ok-solid: var(--green-500);
  --status-ok-solid-fg: #052e16;
  --status-ok-fg: #4ade80;
  --status-ok-bg: #0f2a1f;
  --status-ok-border: #1d5c3d;
  --status-warn: var(--amber-500);
  --status-warn-solid: var(--amber-500);
  --status-warn-solid-fg: #2b1a03;
  --status-warn-fg: var(--amber-400);
  --status-warn-bg: #2b2111;
  --status-warn-border: #6e4e17;
  --status-crit: var(--red-500);
  --status-crit-solid: var(--red-600);
  --status-crit-solid-fg: #ffffff;
  --status-crit-fg: #fca5a5;
  --status-crit-bg: #341a1f;
  --status-crit-border: #7a2c35;
  --status-none: #6b7a93;
  --status-none-solid: #64748b;
  --status-none-solid-fg: #ffffff;
  --status-none-fg: #a7b3c4;
  --status-none-bg: #1a2436;
  --status-none-border: #2c3850;
  --status-info: var(--blue-500);
  --status-info-solid: var(--blue-600);
  --status-info-solid-fg: #ffffff;
  --status-info-fg: #9ec5ff;
  --status-info-bg: #142443;
  --status-info-border: #284a86;
  --ill-stroke: #a9b6ca;
  --ill-body: #2a3750;
  --ill-body-2: #212c41;
  --ill-door: #33425e;
  --ill-detail: #66758f;
  --ill-glass: #0f1726;
  --ill-fan: #b4c1d4;
  --ill-shadow: rgba(0, 0, 0, 0.35);
  --ill-accent: #6ea8fe;
  --ill-lamp-none: #56637a;
  --ill-lamp-ok: #34d399;
  --ill-lamp-warn: var(--amber-400);
  --ill-lamp-crit: #f87171;
  --ill-trouble-body: #3d1d24;
  --ill-trouble-stroke: #fca5a5;
  --map-bg: #0e1524;
  --map-grid: #243048;
  --flow-line: #3f4d66;
  --flow-line-active: #6ea8fe;
  --chart-1: #a8bbfa;
  --chart-2: #1b94c0;
  --chart-3: #b38bf9;
  --chart-4: #bf51f6;
  --chart-5: #8d99aa;
  --chart-6: #b6f0fb;
  --skeleton-base: #1d283c;
  --skeleton-shine: rgba(255, 255, 255, 0.06);
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 72px -16px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0b111d;
    --surface: #121a2a;
    --bg-elev: #172033;
    --surface-2: #162034;
    --surface-3: #1c2639;
    --surface-inverse: #e6ebf2;
    --text-inverse: #0f172a;
    --overlay: rgba(2, 6, 14, 0.66);
    --border: #222d42;
    --border-strong: #2e3a52;
    --border-control: #5f6f8a;
    --border-hover: #7a8aa5;
    --text: #e6ebf2;
    --text-muted: #9aa6b8;
    --text-subtle: #8692a8;
    --text-disabled: #566279;
    --heading: #f1f5f9;
    --accent: var(--blue-600);
    --accent-hover: var(--blue-700);
    --accent-active: var(--blue-700);
    --accent-fg: #ffffff;
    --accent-text: #6ea8fe;
    --accent-text-strong: #9ec5ff;
    --accent-subtle: #16274a;
    --accent-subtle-hover: #1b3260;
    --accent-border: #4d8ef7;
    --accent-muted: #284a86;
    --focus-ring: #6ea8fe;
    --focus-halo: 0 0 0 3px rgba(110, 168, 254, 0.35);
    --status-ok: var(--green-500);
    --status-ok-solid: var(--green-500);
    --status-ok-solid-fg: #052e16;
    --status-ok-fg: #4ade80;
    --status-ok-bg: #0f2a1f;
    --status-ok-border: #1d5c3d;
    --status-warn: var(--amber-500);
    --status-warn-solid: var(--amber-500);
    --status-warn-solid-fg: #2b1a03;
    --status-warn-fg: var(--amber-400);
    --status-warn-bg: #2b2111;
    --status-warn-border: #6e4e17;
    --status-crit: var(--red-500);
    --status-crit-solid: var(--red-600);
    --status-crit-solid-fg: #ffffff;
    --status-crit-fg: #fca5a5;
    --status-crit-bg: #341a1f;
    --status-crit-border: #7a2c35;
    --status-none: #6b7a93;
    --status-none-solid: #64748b;
    --status-none-solid-fg: #ffffff;
    --status-none-fg: #a7b3c4;
    --status-none-bg: #1a2436;
    --status-none-border: #2c3850;
    --status-info: var(--blue-500);
    --status-info-solid: var(--blue-600);
    --status-info-solid-fg: #ffffff;
    --status-info-fg: #9ec5ff;
    --status-info-bg: #142443;
    --status-info-border: #284a86;
    --ill-stroke: #a9b6ca;
    --ill-body: #2a3750;
    --ill-body-2: #212c41;
    --ill-door: #33425e;
    --ill-detail: #66758f;
    --ill-glass: #0f1726;
    --ill-fan: #b4c1d4;
    --ill-shadow: rgba(0, 0, 0, 0.35);
    --ill-accent: #6ea8fe;
    --ill-lamp-none: #56637a;
    --ill-lamp-ok: #34d399;
    --ill-lamp-warn: var(--amber-400);
    --ill-lamp-crit: #f87171;
    --ill-trouble-body: #3d1d24;
    --ill-trouble-stroke: #fca5a5;
    --map-bg: #0e1524;
    --map-grid: #243048;
    --flow-line: #3f4d66;
    --flow-line-active: #6ea8fe;
    --chart-1: #a8bbfa;
    --chart-2: #1b94c0;
    --chart-3: #b38bf9;
    --chart-4: #bf51f6;
    --chart-5: #8d99aa;
    --chart-6: #b6f0fb;
    --skeleton-base: #1d283c;
    --skeleton-shine: rgba(255, 255, 255, 0.06);
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 44px -12px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 28px 72px -16px rgba(0, 0, 0, 0.8);
  }
}

/* ==========================================================================
   Kontras tinggi (area terang / sinar matahari) — [data-contrast="high"].
   Blok terang lalu blok gelap; set token yang sama di keduanya.
   ========================================================================== */
:root[data-contrast="high"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --bg-elev: #ffffff;
  --surface-2: #f3f5f8;
  --surface-3: #e6ebf1;
  --border: #5b6678;
  --border-strong: #3f4a5c;
  --border-control: #0f172a;
  --border-hover: #000000;
  --border-width: 1.5px;
  --text: #000000;
  --text-muted: #1f2937;
  --text-subtle: #374151;
  --text-disabled: #6b7280;
  --heading: #000000;
  --accent: var(--blue-700);
  --accent-hover: var(--blue-800);
  --accent-active: var(--blue-900);
  --accent-text: var(--blue-800);
  --accent-text-strong: var(--blue-900);
  --accent-subtle: #dbeafe;
  --accent-subtle-hover: #bfdbfe;
  --accent-border: var(--blue-800);
  --danger: var(--red-700);
  --danger-hover: var(--red-900);
  --focus-ring: #000000;
  --focus-ring-width: 3px;
  --focus-halo: 0 0 0 3px #000000;
  --status-ok: var(--green-700);
  --status-ok-solid: var(--green-700);
  --status-ok-solid-fg: #ffffff;
  --status-ok-fg: var(--green-900);
  --status-ok-bg: #dcfce7;
  --status-ok-border: var(--green-700);
  --status-warn: var(--amber-700);
  --status-warn-solid: var(--amber-700);
  --status-warn-solid-fg: #ffffff;
  --status-warn-fg: var(--amber-900);
  --status-warn-bg: #fef3c7;
  --status-warn-border: var(--amber-700);
  --status-crit: var(--red-700);
  --status-crit-solid: var(--red-700);
  --status-crit-solid-fg: #ffffff;
  --status-crit-fg: var(--red-900);
  --status-crit-bg: #fee2e2;
  --status-crit-border: var(--red-700);
  --status-none: #374151;
  --status-none-solid: #4b5563;
  --status-none-solid-fg: #ffffff;
  --status-none-fg: #111827;
  --status-none-bg: #f3f4f6;
  --status-none-border: #4b5563;
  --status-info-fg: var(--blue-900);
  --status-info-bg: #dbeafe;
  --status-info-border: var(--blue-800);
  --ill-stroke: #0f172a;
  --ill-detail: #3f4a5c;
  --ill-fan: #0f172a;
  --flow-line: #3f4a5c;
  --map-grid: #c9d2dd;
  --shadow-sm: 0 0 0 1px #3f4a5c;
  --shadow-md: 0 0 0 1px #0f172a, 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 0 0 2px #0f172a, 0 16px 40px rgba(0, 0, 0, 0.3);
}

:root[data-contrast="high"][data-theme="dark"] {
  --bg: #000000;
  --surface: #05070b;
  --bg-elev: #0a0d14;
  --surface-2: #10141d;
  --surface-3: #1a1f2b;
  --border: #9aa6b8;
  --border-strong: #c9d2dd;
  --border-control: #ffffff;
  --border-hover: #ffffff;
  --text: #ffffff;
  --text-muted: #e5e7eb;
  --text-subtle: #d1d5db;
  --text-disabled: #9ca3af;
  --heading: #ffffff;
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-active: var(--blue-700);
  --accent-text: #93c5fd;
  --accent-text-strong: #bfdbfe;
  --accent-subtle: #0b2a5c;
  --accent-subtle-hover: #10367a;
  --accent-border: #93c5fd;
  --focus-ring: #ffffff;
  --focus-halo: 0 0 0 3px #ffffff;
  --status-ok: #4ade80;
  --status-ok-solid: #4ade80;
  --status-ok-solid-fg: #000000;
  --status-ok-fg: #86efac;
  --status-ok-bg: #052e16;
  --status-ok-border: #4ade80;
  --status-warn: #fbbf24;
  --status-warn-solid: #fbbf24;
  --status-warn-solid-fg: #000000;
  --status-warn-fg: #fde68a;
  --status-warn-bg: #2b1a03;
  --status-warn-border: #fbbf24;
  --status-crit: #f87171;
  --status-crit-solid: #f87171;
  --status-crit-solid-fg: #000000;
  --status-crit-fg: #fecaca;
  --status-crit-bg: #3b0a0a;
  --status-crit-border: #f87171;
  --status-none: #d1d5db;
  --status-none-solid: #9ca3af;
  --status-none-solid-fg: #000000;
  --status-none-fg: #f3f4f6;
  --status-none-bg: #111827;
  --status-none-border: #9ca3af;
  --status-info-fg: #bfdbfe;
  --status-info-bg: #0b2a5c;
  --status-info-border: #93c5fd;
  --ill-stroke: #e5e7eb;
  --ill-detail: #9aa6b8;
  --ill-fan: #ffffff;
  --flow-line: #9aa6b8;
  --map-grid: #2e3a52;
  --shadow-sm: 0 0 0 1px #9aa6b8;
  --shadow-md: 0 0 0 1px #ffffff;
  --shadow-lg: 0 0 0 2px #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #000000;
    --surface: #05070b;
    --bg-elev: #0a0d14;
    --surface-2: #10141d;
    --surface-3: #1a1f2b;
    --border: #9aa6b8;
    --border-strong: #c9d2dd;
    --border-control: #ffffff;
    --border-hover: #ffffff;
    --text: #ffffff;
    --text-muted: #e5e7eb;
    --text-subtle: #d1d5db;
    --text-disabled: #9ca3af;
    --heading: #ffffff;
    --accent: var(--blue-600);
    --accent-hover: var(--blue-700);
    --accent-active: var(--blue-700);
    --accent-text: #93c5fd;
    --accent-text-strong: #bfdbfe;
    --accent-subtle: #0b2a5c;
    --accent-subtle-hover: #10367a;
    --accent-border: #93c5fd;
    --focus-ring: #ffffff;
    --focus-halo: 0 0 0 3px #ffffff;
    --status-ok: #4ade80;
    --status-ok-solid: #4ade80;
    --status-ok-solid-fg: #000000;
    --status-ok-fg: #86efac;
    --status-ok-bg: #052e16;
    --status-ok-border: #4ade80;
    --status-warn: #fbbf24;
    --status-warn-solid: #fbbf24;
    --status-warn-solid-fg: #000000;
    --status-warn-fg: #fde68a;
    --status-warn-bg: #2b1a03;
    --status-warn-border: #fbbf24;
    --status-crit: #f87171;
    --status-crit-solid: #f87171;
    --status-crit-solid-fg: #000000;
    --status-crit-fg: #fecaca;
    --status-crit-bg: #3b0a0a;
    --status-crit-border: #f87171;
    --status-none: #d1d5db;
    --status-none-solid: #9ca3af;
    --status-none-solid-fg: #000000;
    --status-none-fg: #f3f4f6;
    --status-none-bg: #111827;
    --status-none-border: #9ca3af;
    --status-info-fg: #bfdbfe;
    --status-info-bg: #0b2a5c;
    --status-info-border: #93c5fd;
    --ill-stroke: #e5e7eb;
    --ill-detail: #9aa6b8;
    --ill-fan: #ffffff;
    --flow-line: #9aa6b8;
    --map-grid: #2e3a52;
    --shadow-sm: 0 0 0 1px #9aa6b8;
    --shadow-md: 0 0 0 1px #ffffff;
    --shadow-lg: 0 0 0 2px #ffffff;
  }
}

/* ==========================================================================
   Gerak minimal: semua durasi menjadi 0ms.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}