/* ==========================================================================
   Reservtn 予約 — Design Tokens R1 (sumber: mockup v23)
   Impor di src/index.css SEBELUM @tailwind utilities.
   Struktur: 1) netral  2) status  3) aksen platform + theme-per-merchant
             4) tipografi  5) spacing/radius/shadow  6) dark mode
   ========================================================================== */

:root {
  /* --- 1. Netral: dashboard/landing (pg) --- */
  --pg-bg: #f4f3f0;
  --pg-card: #ffffff;
  --pg-fg: #1d1c1a;
  --pg-mut: #6e6a63;
  --pg-line: #e0ddd6;

  /* --- 1b. Netral: PWA customer (app) --- */
  --app-bg: #faf9f7;
  --app-card: #ffffff;
  --app-line: #e7e4de;
  --ink: #231f1c;
  --mut: #77726a;

  /* --- 2. Status semantik --- */
  --ok: #1d7a46;        --ok-soft: #e5f3ea;
  --warn: #a05a00;      --warn-soft: #faf0dd;
  --err: #b3372f;       --err-soft: #f9e9e7;

  /* --- 3. Aksen platform (slate). Merchant meng-override di scope. --- */
  --acc: #3d4a5c;
  --acc-soft: #e9edf2;
  --acc-ink: #ffffff;

  /* --- 4. Tipografi --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --fs-micro: 10.5px;    /* uppercase ls .09em, footer/label mikro */
  --fs-overline: 11px;   /* uppercase ls .1em: eyebrow, th, tile-k, tabs */
  --fs-caption: 12px;    /* meta, badge, note kecil (11.5–12) */
  --fs-body-s: 12.5px;   /* note, label form, chips, mini button */
  --fs-body: 13.5px;     /* body default, lede, sumline, tabel (13–13.5) */
  --fs-ui: 14px;         /* input, kontrol */
  --fs-ui-lg: 14.5px;    /* nama item, total */
  --fs-title-s: 15px;    /* h3 pane, CTA, brand kecil */
  --fs-title: 16.5px;    /* judul kartu landing */
  --fs-h2: 19px;         /* judul layar PWA */
  --fs-stat: 22px;       /* angka tile */
  --fs-code: 24px;       /* kode booking */
  --fs-display: 31px;    /* wordmark login */
  --fs-queue: 52px;      /* nomor antrian */
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --ls-overline: .1em;

  /* --- 5. Spacing / radius / shadow / motion --- */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 12px;
  --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --shadow-phone: 0 12px 32px rgba(0, 0, 0, .10);
  --focus-ring: 2px solid var(--acc);
  --ease-screen: .22s ease;
}

/* ==========================================================================
   6. DARK MODE — otomatis (media) + manual (data-theme)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-bg: #191a1c;  --pg-card: #222420; --pg-fg: #e9e7e2;
    --pg-mut: #a09b92; --pg-line: #33342f;
    --app-bg: #1c1d1f; --app-card: #26272a; --app-line: #35363a;
    --ink: #ebe9e5;    --mut: #a29d94;
    --ok: #4ccb85;   --ok-soft: #173324;
    --warn: #e3a24f; --warn-soft: #33270f;
    --err: #e77d74;  --err-soft: #331a17;
    /* aksen slate diterangkan agar kontras di bg gelap */
    --acc: #93a5bd; --acc-soft: #2a3140; --acc-ink: #14181e;
  }
}
:root[data-theme="dark"] {
  --pg-bg: #191a1c;  --pg-card: #222420; --pg-fg: #e9e7e2;
  --pg-mut: #a09b92; --pg-line: #33342f;
  --app-bg: #1c1d1f; --app-card: #26272a; --app-line: #35363a;
  --ink: #ebe9e5;    --mut: #a29d94;
  --ok: #4ccb85;   --ok-soft: #173324;
  --warn: #e3a24f; --warn-soft: #33270f;
  --err: #e77d74;  --err-soft: #331a17;
  --acc: #93a5bd; --acc-soft: #2a3140; --acc-ink: #14181e;
}

/* ==========================================================================
   THEME-PER-MERCHANT — pola override
   FE menyuntik dari API tenant: <div class="merchant-scope"
     style="--acc:#34518c; --acc-soft:#e9edf6">
   Di dark mode, acc-soft merchant diturunkan otomatis dari --acc
   (merchant tidak perlu menyediakan varian dark).
   ========================================================================== */
.merchant-scope {
  /* fallback = aksen platform bila tenant belum punya theme */
  --acc-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .merchant-scope {
    --acc-soft: color-mix(in srgb, var(--acc) 18%, var(--app-bg));
  }
}
:root[data-theme="dark"] .merchant-scope {
  --acc-soft: color-mix(in srgb, var(--acc) 18%, var(--app-bg));
}

/* Superadmin: SELALU slate platform, tidak ikut theme merchant */
.platform-scope {
  --acc: #3d4a5c;
  --acc-soft: #e9edf2;
  --acc-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .platform-scope {
    --acc: #93a5bd; --acc-soft: #2a3140; --acc-ink: #14181e;
  }
}
:root[data-theme="dark"] .platform-scope {
  --acc: #93a5bd; --acc-soft: #2a3140; --acc-ink: #14181e;
}

/* ==========================================================================
   Utilitas dasar yang bergantung token (opsional, dipakai lintas app)
   ========================================================================== */
.wordmark {                 /* logotype ala Kawasaki Ninja — D-044 */
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.015em;
  display: inline-block;
  transform: skewX(-9deg);
  line-height: 1.05;
}
.kata { font-weight: 700; letter-spacing: .32em; } /* 予約 */
.wm-slash {
  height: 4px;
  background: var(--acc);
  transform: skewX(-32deg);
  border-radius: 2px;
}
.tabular { font-variant-numeric: tabular-nums; }
:where(input, select, textarea, button):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}