/* StatLab — design tokens. Terang bawaan; gelap via [data-theme=dark] atau preferensi sistem. */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef1f5;
  --border: #dfe3ea;
  --border-strong: #c3c9d4;
  --text: #161a20;
  --text-2: #444c59;
  --muted: #566070;
  --faint: #7f8896;

  --accent: #0f62fe;
  --accent-hover: #0050e6;
  --accent-press: #0043ce;
  --accent-soft: #e8f0ff;
  --accent-text: #0043ce;
  --on-accent: #ffffff;

  --ok: #198038;      --ok-soft: #e6f5ea;
  --warn: #8a6100;    --warn-soft: #fff6d6;  --warn-line: #f1c21b;
  --danger: #da1e28;  --danger-soft: #ffe9ea;
  --info: #0f62fe;    --info-soft: #e8f0ff;
  --tip: #6929c4;     --tip-soft: #f1eaff;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .10), 0 2px 4px rgba(16, 24, 40, .06);
  --shadow-3: 0 18px 48px rgba(16, 24, 40, .18);

  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --rail-w: 88px; --top-h: 62px;
  --fs: 16px;
  --pad-btn: 10px 18px; --pad-card: 24px; --pad-cell: 8px 14px; /* kerapatan: diubah theme.css */
  --ring: 0 0 0 3px rgba(15, 98, 254, .28);

  --cell-bg: #fff; --cell-alt: #fbfcfe; --cell-sel: #dbe8ff; --cell-head: #f1f4f8;
  --scale: #0f62fe; --ordinal: #8a3ffc; --nominal: #198038;
}

:root[data-theme="dark"] {
  --bg: #0e1116; --surface: #171b22; --surface-2: #1c2129; --surface-3: #232932;
  --border: #2a313c; --border-strong: #3a4352;
  --text: #eef1f6; --text-2: #c4cbd6; --muted: #98a2b3; --faint: #8a94a6;
  --accent: #4589ff; --accent-hover: #6ea0ff; --accent-press: #8fb4ff; --accent-soft: #14264a; --accent-text: #a6c8ff; --on-accent: #06101f;
  --ok: #42be65; --ok-soft: #10281a;
  --warn: #f1c21b; --warn-soft: #302708; --warn-line: #8e6a00;
  --danger: #ff8389; --danger-soft: #34171a;
  --info: #78a9ff; --info-soft: #14264a;
  --tip: #be95ff; --tip-soft: #251a3d;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 6px 18px rgba(0, 0, 0, .45); --shadow-3: 0 22px 60px rgba(0, 0, 0, .6);
  --cell-bg: #171b22; --cell-alt: #1a1f27; --cell-sel: #1d3566; --cell-head: #1f252e;
  --scale: #78a9ff; --ordinal: #be95ff; --nominal: #42be65;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116; --surface: #171b22; --surface-2: #1c2129; --surface-3: #232932;
    --border: #2a313c; --border-strong: #3a4352;
    --text: #eef1f6; --text-2: #c4cbd6; --muted: #98a2b3; --faint: #8a94a6;
    --accent: #4589ff; --accent-hover: #6ea0ff; --accent-press: #8fb4ff; --accent-soft: #14264a; --accent-text: #a6c8ff; --on-accent: #06101f;
    --ok: #42be65; --ok-soft: #10281a;
    --warn: #f1c21b; --warn-soft: #302708; --warn-line: #8e6a00;
    --danger: #ff8389; --danger-soft: #34171a;
    --info: #78a9ff; --info-soft: #14264a;
    --tip: #be95ff; --tip-soft: #251a3d;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 6px 18px rgba(0, 0, 0, .45); --shadow-3: 0 22px 60px rgba(0, 0, 0, .6);
    --cell-bg: #171b22; --cell-alt: #1a1f27; --cell-sel: #1d3566; --cell-head: #1f252e;
    --scale: #78a9ff; --ordinal: #be95ff; --nominal: #42be65;
    color-scheme: dark;
  }
}