/* token.css — design token "Calm Pro" v1 (konsultan 7 Nov 2026, docs/UI-TOKENS.md; keputusan Ko D32a/D34c). Satu-satunya tempat warna hex (T1).
   Dimuat sebelum bingkai.css & wadah.css di tampilan v2 (saklar menu_v2). Nilai dari konsultan tidak diubah; tambahan tim di bawah blok konsultan:
   font dihosting sendiri (T7), fallback gelap tanpa JS (T6), padanan nama variabel lama View/wadah/bingkai. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url(/aset/font/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800;src:url(/aset/font/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  /* Tipografi */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px;
  --lh: 1.5; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* Ruang (skala 4 px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Bentuk & gerak */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --dur: 160ms; --ease: cubic-bezier(.2,.8,.2,1);

  /* Tata letak */
  --sidebar-w: 240px; --header-h: 56px; --content-max: 1280px;
  --drawer-w: 480px; --drawer-w-lebar: 640px;
  --tap-min: 44px; --tap-min-staf: 48px;          /* U5: staff_lite */

  /* ===== Tema TERANG ===== */
  color-scheme: light;
  --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --surface-hover: #eef2f7;
  --border: #e2e8f0; --border-strong: #cbd5e1;
  --fg: #0f172a; --fg-muted: #475569; --fg-subtle: #64748b;

  --accent: #2457c5; --accent-hover: #1d4aa8; --accent-fg: #ffffff;
  --accent-soft: #e8efff;                                   /* latar tab/segmen aktif */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  --success: #15803d; --warning: #b45309; --danger: #be123c; --info: #1d4ed8;
  --danger-fg: #ffffff; --danger-soft: #ffe4e6;

  /* Status booking (U7) — latar / teks */
  --st-booked-bg:  #dbeafe; --st-booked-fg:  #1e40af;   /* Dipesan ■ */
  --st-hold-bg:    #fef3c7; --st-hold-fg:    #92400e;   /* Menunggu DP ⏱ */
  --st-running-bg: #e0e7ff; --st-running-fg: #3730a3;   /* Berjalan ▶ */
  --st-done-bg:    #dcfce7; --st-done-fg:    #166534;   /* Selesai ✓ */
  --st-noshow-bg:  #ffe4e6; --st-noshow-fg:  #9f1239;   /* Tidak datang ✕ */
  --st-cancel-bg:  #f1f5f9; --st-cancel-fg:  #475569;   /* Batal ⊘ (teks dicoret) */
  --slot-off: repeating-linear-gradient(135deg, #f1f5f9 0 6px, #e8edf3 6px 12px); /* di luar jadwal (J3) */
  --now-line: #e11d48;

  --shadow-1: 0 1px 2px rgb(15 23 42 / .06);
  --shadow-2: 0 8px 24px rgb(15 23 42 / .12);           /* drawer/modal */
}

/* ===== Tema GELAP — atribut data-tema selalu diisi skrip di <head> (lihat bawah) ===== */
:root[data-tema="gelap"] {
  color-scheme: dark;
  --bg: #111318; --surface: #1a1d23; --surface-2: #22262e; --surface-hover: #262b34;
  --border: #2c313a; --border-strong: #3a404b;
  --fg: #e6e8ec; --fg-muted: #a3acb9; --fg-subtle: #8b94a3;

  --accent: #7aa2ff; --accent-hover: #93b4ff; --accent-fg: #0b1220;  /* pola G2 tim */
  --accent-soft: rgb(122 162 255 / .14);

  --success: #4ade80; --warning: #fbbf24; --danger: #fb7185; --info: #93c5fd;
  --danger-fg: #1a0a0e; --danger-soft: rgb(244 63 94 / .16);

  --st-booked-bg:  rgb(59 130 246 / .18);  --st-booked-fg:  #93c5fd;
  --st-hold-bg:    rgb(245 158 11 / .18);  --st-hold-fg:    #fcd34d;
  --st-running-bg: rgb(99 102 241 / .22);  --st-running-fg: #a5b4fc;
  --st-done-bg:    rgb(34 197 94 / .16);   --st-done-fg:    #86efac;
  --st-noshow-bg:  rgb(244 63 94 / .18);   --st-noshow-fg:  #fda4af;
  --st-cancel-bg:  rgb(148 163 184 / .14); --st-cancel-fg:  #cbd5e1;
  --slot-off: repeating-linear-gradient(135deg, #16191e 0 6px, #1c2027 6px 12px);
  --now-line: #fb7185;

  --shadow-1: none;                                       /* gelap: pakai border, bukan bayangan */
  --shadow-2: 0 8px 32px rgb(0 0 0 / .5);
}

@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

/* ===== Tambahan tim ===== */
/* T6 tanpa JS: ikut perangkat bila atribut data-tema belum diisi */
@media (prefers-color-scheme: dark) { :root:not([data-tema]) {
  color-scheme: dark;
  --bg: #111318; --surface: #1a1d23; --surface-2: #22262e; --surface-hover: #262b34;
  --border: #2c313a; --border-strong: #3a404b;
  --fg: #e6e8ec; --fg-muted: #a3acb9; --fg-subtle: #8b94a3;

  --accent: #7aa2ff; --accent-hover: #93b4ff; --accent-fg: #0b1220;  /* pola G2 tim */
  --accent-soft: rgb(122 162 255 / .14);

  --success: #4ade80; --warning: #fbbf24; --danger: #fb7185; --info: #93c5fd;
  --danger-fg: #1a0a0e; --danger-soft: rgb(244 63 94 / .16);

  --st-booked-bg:  rgb(59 130 246 / .18);  --st-booked-fg:  #93c5fd;
  --st-hold-bg:    rgb(245 158 11 / .18);  --st-hold-fg:    #fcd34d;
  --st-running-bg: rgb(99 102 241 / .22);  --st-running-fg: #a5b4fc;
  --st-done-bg:    rgb(34 197 94 / .16);   --st-done-fg:    #86efac;
  --st-noshow-bg:  rgb(244 63 94 / .18);   --st-noshow-fg:  #fda4af;
  --st-cancel-bg:  rgb(148 163 184 / .14); --st-cancel-fg:  #cbd5e1;
  --slot-off: repeating-linear-gradient(135deg, #16191e 0 6px, #1c2027 6px 12px);
  --now-line: #fb7185;

  --shadow-1: none;                                       /* gelap: pakai border, bukan bayangan */
  --shadow-2: 0 8px 32px rgb(0 0 0 / .5);
} }

/* Padanan nama variabel lama (View::head, wadah.css, bingkai.css) → token */
:root { --panel: var(--surface); --teks: var(--fg); --redup: var(--fg-muted); --garis: var(--border); --aksen: var(--accent); --aksen-teks: var(--accent-fg);
        --ok: var(--success); --awas: var(--warning); --bahaya: var(--danger); }
body { font: var(--fw-reg) var(--fs-base)/var(--lh) var(--font-ui); color: var(--fg); background: var(--bg); }
@media (max-width: 899px) { body { font-size: var(--fs-md); } }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }