/* ============================================================
   TOKEN SYSTEM — Light (default) + Dark override
   RSN Johor 2040 · Dashboard Analitik
   Diport daripada prototaip mockup_index_v4.html (dinyahduplikasi).
   ============================================================ */
:root{
  /* Brand — diselaraskan dengan jenama logo JOHOR2040 (navi diraja + merah jata Johor) */
  --primary:#17278C; --primary-hover:#1E31A6; --primary-dark:#0B1550;
  --primary-soft:#E2E5FA; --primary-100:#EEF0FD;
  --primary-glow:rgba(23,39,140,.18);
  --accent:#CE1126; --accent-soft:#FDE3E4;

  /* Semantic */
  --green:#16A34A; --green-soft:#DCFCE7; --green-dim:rgba(22,163,74,.12);
  --amber:#D97706; --amber-soft:#FEF3C7; --amber-dim:rgba(217,119,6,.12);
  --red:#DC2626;   --red-soft:#FEE2E2;   --red-dim:rgba(220,38,38,.12);
  --purple:#7C3AED;--purple-soft:#EDE9FE;--purple-dim:rgba(124,58,237,.12);
  --blue-bright:#3B82F6;

  /* Surface (Light) */
  --bg:#EEF2F7; --bg-2:#E4EAF3;
  --surface:#FFFFFF; --surface-2:#F4F7FB; --surface-3:#EBF0F7;
  --border:rgba(30,48,80,.1); --border-2:rgba(30,48,80,.06);

  /* Ink (Light) */
  --ink:#0D1829; --ink-2:#445566; --ink-3:#7A8EA8; --ink-4:#B8C8DC;

  /* Elevation */
  --shadow:0 1px 3px rgba(13,24,41,.07),0 1px 2px rgba(13,24,41,.05);
  --shadow-md:0 4px 12px -2px rgba(13,24,41,.09),0 2px 6px -1px rgba(13,24,41,.06);
  --shadow-lg:0 8px 28px -4px rgba(13,24,41,.13),0 4px 10px -2px rgba(13,24,41,.07);
  --shadow-glow:0 0 0 3px var(--primary-glow);

  /* Sidebar (always deep — both themes) */
  --sidebar:#060C1A; --sidebar-2:#0B1430;
  --sidebar-border:rgba(255,255,255,.07);
  --sidebar-text:#9BAAC0; --sidebar-text-hover:#FFFFFF;
  --sidebar-active-bg:#17278C;
  --sidebar-active-glow:0 4px 18px -4px rgba(23,39,140,.7);
  --sidebar-section:#3D5270;

  /* Layout */
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --side-w:244px;
}

[data-theme="dark"]{
  --bg:#0D1117; --bg-2:#0A0E14;
  --surface:#161B22; --surface-2:#1C2333; --surface-3:#21293A;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.05);
  --ink:#E6EDF3; --ink-2:#8B9BB4; --ink-3:#4D5D72; --ink-4:#2D3A4A;
  --shadow:0 1px 4px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 14px -2px rgba(0,0,0,.55),0 2px 6px -1px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px -4px rgba(0,0,0,.7),0 4px 12px -2px rgba(0,0,0,.5);
  --primary-soft:rgba(23,39,140,.28); --primary-100:rgba(23,39,140,.18);
  --primary-glow:rgba(23,39,140,.45);
  --green-soft:rgba(22,163,74,.18); --green-dim:rgba(22,163,74,.12);
  --amber-soft:rgba(217,119,6,.18);  --amber-dim:rgba(217,119,6,.12);
  --red-soft:rgba(220,38,38,.18);    --red-dim:rgba(220,38,38,.12);
  --purple-soft:rgba(124,58,237,.22);--purple-dim:rgba(124,58,237,.14);
  --accent-soft:rgba(206,17,38,.22);
}