/* washere design tokens — "Belau & Jemuran". Semua warna UI & grafik hanya boleh berasal dari sini. */
:root {
  color-scheme: light;
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-alt: #EAF0F5;
  --ink: #14202E;
  --muted: #556173;
  --line: #E7E3DA;
  --line-strong: #8C877C;
  --primary: #1F5FAD;
  --primary-dark: #184C8C;
  --primary-tint: #E6EEF8;
  --on-primary: #FFFFFF;
  --accent: #F2B544;
  --on-accent: #14202E;
  --ok: #1D6B43; --ok-bg: #E4F1E8;
  --warn: #8A5300; --warn-bg: #FCEFD9;
  --err: #A8321F; --err-bg: #FBE9E5;
  --info: #1F5FAD; --info-bg: #E6EEF8;
  --scrim: rgb(20 32 46 / .45);
  --shadow-overlay: 0 1px 0 rgb(20 32 46 / .06), 0 12px 28px -14px rgb(20 32 46 / .35);
  --shadow-card: 0 1px 2px rgb(20 32 46 / .04), 0 8px 24px -16px rgb(20 32 46 / .18);
  --shadow-lift: 0 2px 4px rgb(20 32 46 / .05), 0 16px 36px -18px rgb(20 32 46 / .28);
  --kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%231F5FAD' stroke-opacity='.16'%3E%3Cellipse cx='7' cy='7' rx='5.5' ry='3' transform='rotate(45 7 7)'/%3E%3Cellipse cx='21' cy='7' rx='5.5' ry='3' transform='rotate(-45 21 7)'/%3E%3Cellipse cx='7' cy='21' rx='5.5' ry='3' transform='rotate(-45 7 21)'/%3E%3Cellipse cx='21' cy='21' rx='5.5' ry='3' transform='rotate(45 21 21)'/%3E%3Cg fill='%231F5FAD' fill-opacity='.16' stroke='none'%3E%3Ccircle cx='14' cy='14' r='1.2'/%3E%3Ccircle cx='0' cy='0' r='1.2'/%3E%3Ccircle cx='28' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='28' r='1.2'/%3E%3Ccircle cx='28' cy='28' r='1.2'/%3E%3C/g%3E%3C/svg%3E");

  /* Grafik — divalidasi dengan dataviz validate_palette.js (all-pairs, light vs #FFFFFF) */
  --viz-surface: #FFFFFF;
  --viz-mnh: #1F5FAD;
  --viz-jbr: #BF8412;
  --viz-lwy: #9E4A2E;
  --viz-muted: #C5CCD6;   /* de-emphasis (emphasis form) */
  --viz-grid: #E9ECF0;
  --viz-axis: #B9C0CA;
  --viz-ref: #556173;     /* garis rata-rata / SLA */
  --seq-0: #EAF0F5;       /* sel heatmap bernilai nol */
  --seq-1: #94B4E0; --seq-2: #6E98D2; --seq-3: #4A7DC2; --seq-4: #2B62AE; --seq-5: #184C8C;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-xs: 3px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --e-pop: cubic-bezier(.34, 1.4, .64, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1620; --surface: #16202D; --surface-alt: #1D2A3A;
  --ink: #E8EDF3; --muted: #A2AEBE; --line: #273445; --line-strong: #5E6B7D;
  --primary: #7FB0F0; --primary-dark: #A2C6F5; --primary-tint: #172A42; --on-primary: #0F1620;
  --ok: #7CC79A; --ok-bg: #15301F; --warn: #F0B95A; --warn-bg: #33270F; --err: #F08C7A; --err-bg: #3A1A15; --info: #8DB7EE; --info-bg: #172A42;
  --scrim: rgb(0 0 0 / .6);
  --shadow-overlay: 0 1px 0 rgb(0 0 0 / .3), 0 14px 30px -12px rgb(0 0 0 / .7);
  --shadow-card: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 24px -16px rgb(0 0 0 / .6);
  --shadow-lift: 0 1px 0 rgb(255 255 255 / .04) inset, 0 18px 36px -18px rgb(0 0 0 / .75);
  --kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%237FB0F0' stroke-opacity='.12'%3E%3Cellipse cx='7' cy='7' rx='5.5' ry='3' transform='rotate(45 7 7)'/%3E%3Cellipse cx='21' cy='7' rx='5.5' ry='3' transform='rotate(-45 21 7)'/%3E%3Cellipse cx='7' cy='21' rx='5.5' ry='3' transform='rotate(-45 7 21)'/%3E%3Cellipse cx='21' cy='21' rx='5.5' ry='3' transform='rotate(45 21 21)'/%3E%3Cg fill='%237FB0F0' fill-opacity='.12' stroke='none'%3E%3Ccircle cx='14' cy='14' r='1.2'/%3E%3Ccircle cx='0' cy='0' r='1.2'/%3E%3Ccircle cx='28' cy='0' r='1.2'/%3E%3Ccircle cx='0' cy='28' r='1.2'/%3E%3Ccircle cx='28' cy='28' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --viz-surface: #16202D; --viz-mnh: #4F8BDA; --viz-jbr: #BA8D1E; --viz-lwy: #BB4E3C;
  --viz-muted: #3A4656; --viz-grid: #223042; --viz-axis: #3A4656; --viz-ref: #A2AEBE;
  --seq-0: #1D2A3A; --seq-1: #30598C; --seq-2: #4672AD; --seq-3: #6690CB; --seq-4: #8FB1E2; --seq-5: #BDD4F4;
}