/* Nyetruk — design token (satu-satunya tempat nilai mentah boleh ditulis).
   Lapisan 1 · primitif  : palet & skala (jangan dipakai langsung di komponen kalau ada token semantiknya)
   Lapisan 2 · semantik  : peran (latar, teks, aksi, status, kertas, media, kategori, grafik) — terang & gelap
   Komponen (app.css) & elemen JS WAJIB memakai var(--…). Diperiksa oleh scripts/check-tokens.mjs. */

/* ================= 1. PRIMITIF ================= */
:root {
  /* netral hangat */
  --stone-0: #ffffff;
  --stone-25: #fafaf9;
  --stone-50: #f5f5f4;
  --stone-100: #efeeec;
  --stone-200: #e2e0dd;
  --stone-500: #6b6560;
  --stone-600: #57534e;
  --stone-900: #1c1917;
  --black: #000000;
  --ink-900: #0b0b0c;
  --ink-850: #111113;
  --ink-800: #1a1a1d;
  --ink-750: #1c1b1a;
  --ink-700: #27272b;
  --sand-300: #9c9893;
  --sand-200: #c8c5c1;
  --sand-100: #d6d3d1;
  --white: #ffffff;

  /* merek oranye */
  --orange-50: #ffede3;
  --orange-300: #ff9a5c;
  --orange-400: #ff8c4a;
  --orange-450: #ff7a2e;
  --orange-500: #ff6a1a;
  --orange-550: #f25c0a;
  --orange-700: #c2410c;
  --orange-950: #2b1608;
  --orange-ink: #1c1410;
  --orange-ink-dark: #1c0d02;

  /* status */
  --green-50: #dcfce7;
  --green-400: #4ade80;
  --green-700: #15803d;
  --green-950: #0f2a19;
  --yellow-50: #fef3c7;
  --yellow-400: #facc15;
  --yellow-800: #854d0e;
  --yellow-950: #2e2508;
  --red-50: #fee2e2;
  --red-400: #f87171;
  --red-700: #b91c1c;
  --red-950: #2e1010;
  --blue-50: #dbeafe;
  --blue-300: #93c5fd;
  --blue-700: #1d4ed8;
  --blue-950: #0f1e33;

  /* kategori (latar lembut + ikon) */
  --cat1-bg: #ffedd5; --cat1-fg: #9a3412; --cat1-bg-d: #2a1608; --cat1-fg-d: #fdba74;
  --cat2-bg: #dcfce7; --cat2-fg: #166534; --cat2-bg-d: #0c2416; --cat2-fg-d: #86efac;
  --cat3-bg: #e0e7ff; --cat3-fg: #3730a3; --cat3-bg-d: #171a3a; --cat3-fg-d: #a5b4fc;
  --cat4-bg: #fce7f3; --cat4-fg: #9d174d; --cat4-bg-d: #2a0f1f; --cat4-fg-d: #f9a8d4;
  --cat5-bg: #e0f2fe; --cat5-fg: #075985; --cat5-bg-d: #0b2030; --cat5-fg-d: #7dd3fc;

  /* grafik metode bayar (tervalidasi buta warna; tanpa oranye merek) */
  --chart-blue: #2a78d6; --chart-blue-d: #3987e5;
  --chart-pink: #e87ba4; --chart-pink-d: #d55181;
  --chart-yellow: #eda100; --chart-yellow-d: #c98500;
  --chart-aqua: #1baf7a; --chart-aqua-d: #199e70;
  --chart-violet: #6250d6; --chart-violet-d: #9085e9;
  --chart-green: #008300;

  /* kertas & media (sama di kedua tema) */
  --paper-100: #fffefa;
  --paper-ink-900: #111111;
  --paper-ink-800: #222222;
  --paper-ink-500: #555555;
  --paper-ink-400: #999999;
  --media-900: #1c1f1d;
  --media-text-200: #e6e6e6;
  --terminal-900: #111111;
  --terminal-green: #9fe5bd;

  /* ---- skala jarak (kelipatan 4, dengan setengah langkah) ---- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-0-75: 3px;
  --space-1: 4px;
  --space-1-25: 5px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-5-5: 22px;
  --space-6: 24px;
  --space-6-5: 26px;
  --space-7-5: 30px;
  --space-8: 32px;
  --space-12: 48px;
  --space-42: 168px; /* posisi kartu tur di atas bar bawah */

  /* ---- skala huruf ---- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 36px;
  --text-7xl: 40px;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-title: 1.25;
  --leading-normal: 1.3;
  --leading-relaxed: 1.35;
  --leading-body: 1.45;
  --leading-loose: 1.5;
  --leading-mono: 1.6;
  --tracking-tightest: -.03em;
  --tracking-tighter: -.025em;
  --tracking-tight: -.02em;
  --tracking-snug: -.01em;
  --tracking-wide: .04em;
  --tracking-wider: .05em;
  --tracking-label: .06em;
  --tracking-code: .2em;
  --tracking-display: .25em;
  --tracking-pin: .4em;

  /* ---- radius ---- */
  --radius-0-5: 2px;
  --radius-0-75: 3px;
  --radius-1: 4px;
  --radius-1-5: 6px;
  --radius-2: 8px;
  --radius-2-25: 9px;
  --radius-2-5: 10px;
  --radius-2-75: 11px;
  --radius-3: 12px;
  --radius-3-5: 14px;
  --radius-4: 16px;
  --radius-5: 20px;
  --radius-5-5: 22px;
  --radius-6: 24px;
  --radius-7-5: 30px;
  --radius-full: 999px;

  /* ---- gerak ---- */
  --dur-instant: 100ms;
  --dur-press: 140ms;
  --dur-fast: 150ms;
  --dur-quick: 160ms;
  --dur-exit: 180ms;
  --dur-base: 200ms;
  --dur-sheet-exit: 220ms;
  --dur-enter: 240ms;
  --dur-move: 260ms;
  --dur-slow: 300ms;
  --dur-hint: 400ms;
  --dur-sheet: 420ms;
  --dur-scan: 1.6s;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);

  /* ---- lapisan ---- */
  --z-raised: 1;
  --z-above: 2;
  --z-sticky: 15;
  --z-bar: 20;
  --z-overlay: 40;
  --z-tour: 60;
  --z-toast: 90;

  /* ---- huruf ---- */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ================= 2. SEMANTIK — TERANG ================= */
:root {
  --bg: var(--stone-50);
  --bg-elev: var(--stone-25);
  --surface: var(--stone-0);
  --surface-2: var(--stone-100);
  --surface-3: var(--stone-200);
  --ink: var(--stone-900);
  --text: var(--stone-900);
  --text-2: var(--stone-600);
  --text-3: var(--stone-500);
  --line: rgba(28, 25, 23, .08);
  --line-strong: rgba(28, 25, 23, .15);

  /* merek: teks di atas oranye selalu gelap (putih di oranye hanya 2,9:1) */
  --primary: var(--orange-500);
  --primary-press: var(--orange-550);
  --primary-soft: var(--orange-50);
  --primary-ink: var(--orange-700);
  --on-primary: var(--orange-ink);

  --success: var(--green-700);
  --success-soft: var(--green-50);
  --accent: var(--yellow-800);      /* peringatan */
  --accent-soft: var(--yellow-50);
  --danger: var(--red-700);
  --danger-soft: var(--red-50);
  --info: var(--blue-700);
  --info-soft: var(--blue-50);

  --glass: rgba(255, 255, 255, .74);
  --glass-line: rgba(255, 255, 255, .7);
  --scrim: rgba(12, 10, 9, .44);
  --scrim-strong: rgba(0, 0, 0, .55);
  --veil-on-ink: rgba(255, 255, 255, .06); /* sorot halus di atas latar gelap (bar keranjang) */
  --on-ink-success: var(--green-700);      /* ikon sukses di atas toast */

  --shadow-1: 0 1px 2px rgba(28, 25, 23, .05), 0 0 0 1px rgba(28, 25, 23, .05);
  --shadow-2: 0 10px 30px -8px rgba(28, 25, 23, .16), 0 2px 6px rgba(28, 25, 23, .06);
  --shadow-3: 0 24px 60px -12px rgba(28, 25, 23, .28), 0 4px 12px rgba(28, 25, 23, .08);
  --shadow-thumb: 0 2px 4px rgba(0, 0, 0, .2);

  /* kertas: struk, label, QR — selalu putih seperti kertas sungguhan */
  --paper: var(--paper-100);
  --paper-white: var(--white);
  --paper-ink: var(--paper-ink-800);
  --paper-ink-strong: var(--paper-ink-900);
  --paper-ink-muted: var(--paper-ink-500);
  --paper-rule: var(--paper-ink-400);
  --print-ink: var(--black);
  --print-danger: var(--red-700);
  --switch-thumb: var(--white);

  /* media: kamera & foto produk (teks putih di atas gambar) */
  --media-bg: var(--media-900);
  --media-fg: var(--white);
  --media-fg-soft: var(--media-text-200);
  --media-glass: rgba(255, 255, 255, .16);
  --media-glass-soft: rgba(255, 255, 255, .1);
  --media-card: rgba(255, 255, 255, .94);
  --media-shade: rgba(0, 0, 0, .55);
  --media-shade-strong: rgba(0, 0, 0, .62);
  --media-shade-soft: rgba(0, 0, 0, .1);
  --media-shade-mid: rgba(0, 0, 0, .45);
  --media-vignette: rgba(0, 0, 0, .75);
  --media-text-shadow: rgba(0, 0, 0, .6);
  --media-photo-bg: var(--paper-ink-800);
  --scan-laser: var(--primary);
  --terminal-bg: var(--terminal-900);
  --terminal-fg: var(--terminal-green);

  /* radius peran */
  --r-xs: var(--radius-2);
  --r-sm: var(--radius-3);
  --r-md: var(--radius-4);
  --r-lg: var(--radius-5-5);
  --r-xl: var(--radius-7-5);
  --r-full: var(--radius-full);

  /* lebar kolom halaman desktop: header & isi memakai lebar yang sama supaya sejajar */
  --page: 1040px;

  /* kategori */
  --cat1-tb: var(--cat1-bg); --cat1-tf: var(--cat1-fg);
  --cat2-tb: var(--cat2-bg); --cat2-tf: var(--cat2-fg);
  --cat3-tb: var(--cat3-bg); --cat3-tf: var(--cat3-fg);
  --cat4-tb: var(--cat4-bg); --cat4-tf: var(--cat4-fg);
  --cat5-tb: var(--cat5-bg); --cat5-tf: var(--cat5-fg);
  --cat6-tb: var(--stone-50); --cat6-tf: var(--stone-600);

  /* grafik metode bayar */
  --m-tunai: var(--chart-blue);
  --m-qris: var(--chart-pink);
  --m-transfer: var(--chart-yellow);
  --m-ewallet: var(--chart-aqua);
  --m-kartu: var(--chart-violet);
  --m-kasbon: var(--chart-green);
}

/* ================= 2. SEMANTIK — GELAP (hitam pekat untuk OLED) ================= */
:root[data-theme="dark"] {
  --bg: var(--black);
  --bg-elev: var(--ink-900);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-700);
  --ink: var(--stone-50);
  --text: var(--stone-50);
  --text-2: var(--sand-200);
  --text-3: var(--sand-300);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);

  --primary: var(--orange-450);
  --primary-press: var(--orange-400);
  --primary-soft: var(--orange-950);
  --primary-ink: var(--orange-300);
  --on-primary: var(--orange-ink-dark);
  --success: var(--green-400);
  --success-soft: var(--green-950);
  --accent: var(--yellow-400);
  --accent-soft: var(--yellow-950);
  --danger: var(--red-400);
  --danger-soft: var(--red-950);
  --info: var(--blue-300);
  --info-soft: var(--blue-950);

  --glass: rgba(17, 17, 19, .78);
  --glass-line: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .66);

  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .07);
  --shadow-2: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07);
  --shadow-3: 0 24px 60px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09);

  --cat1-tb: var(--cat1-bg-d); --cat1-tf: var(--cat1-fg-d);
  --cat2-tb: var(--cat2-bg-d); --cat2-tf: var(--cat2-fg-d);
  --cat3-tb: var(--cat3-bg-d); --cat3-tf: var(--cat3-fg-d);
  --cat4-tb: var(--cat4-bg-d); --cat4-tf: var(--cat4-fg-d);
  --cat5-tb: var(--cat5-bg-d); --cat5-tf: var(--cat5-fg-d);
  --cat6-tb: var(--ink-750); --cat6-tf: var(--sand-100);

  --m-tunai: var(--chart-blue-d);
  --m-qris: var(--chart-pink-d);
  --m-transfer: var(--chart-yellow-d);
  --m-ewallet: var(--chart-aqua-d);
  --m-kartu: var(--chart-violet-d);
}