/* ==========================================================================
   DESIGN TOKENS — NihongoDo
   Tema: kertas washi + tinta sumi, aksen ai-iro (indigo), shu (stempel hanko),
   kin (emas), hisui (jade) & murasaki (amethyst).
   Default tema adalah gelap ("sumi"), selaras dengan referensi desain.
   Ubah nilai di sini untuk mengubah tampilan di seluruh situs.
   ========================================================================== */

:root {
  /* ---- Lapisan latar (ink scale) ---- */
  --ink-0: #14151a; /* dasar terdalam */
  --ink-1: #191b22; /* bg utama */
  --ink-2: #20232c; /* permukaan kartu */
  --ink-3: #272b36; /* permukaan terangkat */
  --ink-4: #313644; /* elemen interaktif / track */
  --ink-5: #3b4152; /* border kuat / hover */

  /* ---- Washi (kertas) & tinta ---- */
  --washi: #f5f0e4;
  --washi-soft: #e9e1cc;
  --washi-dim: #c9c2ae;

  /* ---- Teks ---- */
  /* Kontras vs --ink-1 (#191B22):
     --text       #F5F0E4  ≈ 16.4:1 ✅ AAA
     --text-soft  #B7BECC  ≈  9.8:1 ✅ AAA
     --text-faint #858EA2  ≈  5.5:1 ✅ AA   (dinaikkan dari #7E869A ~4.3:1)
     --text-ghost #7A839A  ≈  4.6:1 ✅ AA   (dinaikkan dari #545B6B ~2.5:1 GAGAL) */
  --text: var(--washi);
  --text-soft: #b7becc;
  --text-faint: #858ea2;
  --text-ghost: #7a839a;

  /* ---- Ai-iro / Indigo (aksen utama) ---- */
  --indigo: #4a6da1;
  --indigo-light: #86a6d6;
  --indigo-dim: #223350;
  --indigo-ghost: rgba(74, 109, 161, 0.12);

  /* ---- Shu / merah stempel hanko (aksen sekunder, CTA) ---- */
  --shu: #c8452e;
  --shu-light: #e8735a;
  --shu-dim: #3d1912;
  --shu-ghost: rgba(200, 69, 46, 0.14);

  /* ---- Kin / emas (progres, XP, pencapaian) ---- */
  --gold: #cba135;
  --gold-light: #e8c868;
  --gold-dim: #3a2e0c;
  --gold-ghost: rgba(203, 161, 53, 0.14);

  /* ---- Hisui / jade (selesai, benar, positif) ---- */
  --jade: #2f8b63;
  --jade-light: #63c594;
  --jade-dim: #103322;
  --jade-ghost: rgba(47, 139, 99, 0.14);

  /* ---- Murasaki / amethyst (N2-N1, fitur premium) ---- */
  --amethyst: #7b5fc0;
  --amethyst-light: #a78ede;
  --amethyst-dim: #241a3d;

  /* ---- Border ---- */
  --border: #2c3140;
  --border-light: #3c4356;
  --border-accent: var(--shu);

  /* ---- Alias semantik (dipakai oleh komponen lama/baru) ---- */
  --color-bg: var(--ink-1);
  --color-surface: var(--ink-2);
  --color-surface-raised: var(--ink-3);
  --color-ink: var(--text);
  --color-ink-soft: var(--text-soft);
  --color-primary: var(--indigo);
  --color-primary-dark: var(--indigo-dim);
  --color-accent: var(--shu);
  --color-border: var(--border);
  --color-success: var(--jade);
  --color-warning: var(--gold);
  --color-danger: var(--shu);

  /* ---- Tipografi ---- */
  --font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Zen Kaku Gothic New", "Noto Sans JP", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Skala ukuran */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  /* Shadow arah atas — untuk bottom navigation bar */
  --shadow-nav: 0 -4px 20px rgba(0, 0, 0, 0.28);
  --shadow-glow-shu: 0 0 16px rgba(200, 69, 46, 0.25);
  --shadow-glow-gold: 0 0 14px rgba(203, 161, 53, 0.22);
  --shadow-glow-indigo: 0 0 16px rgba(74, 109, 161, 0.28);

  /* Transisi */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.3s;
  --dur-slow: 0.6s;

  /* Container */
  --content-max: 1080px;
  --z-header: 50;
  --z-overlay: 900;
  --z-modal: 950;
  --z-toast: 999;

  /* Z-index scale sistematis (MAINT-02)
     Gunakan var(--z-*) — jangan hardcode angka di luar file ini.
     Urutan: base → dropdown → sticky → header → overlay → modal → toast
             → sidebar → tooltip → priority                              */
  --z-base: 0; /* elemen flow normal */
  --z-dropdown: 100; /* menu dropdown, select popover */
  --z-sticky: 200; /* header sticky, tabel header sticky */
  /* --z-header: 50 — sengaja antara base dan dropdown, navbar di atas scroll */
  --z-sidebar: 1000; /* drawer panel (1000) + backdrop (var(--z-sidebar)) */
  --z-tooltip: 1002; /* tooltip, popover — harus di atas sidebar */
  --z-priority: 10000; /* skip-to-content a11y, overlay darurat */
}