/* ==========================================================================
   SAUNG HADIS · DESIGN TOKENS (tokens.css) — Epik 1.3
   Single Source of Truth for Design System (Blueprint §4.2 & §4.3)
   ========================================================================== */

:root {
  /* --- SPACING SCALE (Basis 4px) --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- RADIUS (Fase 4 v114: diselaraskan dengan nilai dominan desain) --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* --- TYPOGRAPHY FAMILIES --- */
  --font-arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  --font-latin: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: var(--font-latin);
  --font-mono: 'JetBrains Mono', monospace;

  /* --- LAYOUT & CONTAINERS --- */
  --container-reading: 68ch;
  --container-content: 1080px;
  --container-wide: 1320px;

  /* --- TRANSITIONS & DURATIONS --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* --- PURE BASE COLORS --- */
  --color-white: #ffffff;
  --color-black: #000000;
}

/* --------------------------------------------------------------------------
   PALET DARK MODE (Default - Obsidian Slate)
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  /* Studio Base Palette */
  --studio-bg: #0e1015;
  --studio-surface: #161821;
  --studio-hover: #1f2230;
  --studio-deck: #0a0c10;
  
  --studio-border: #262a38;
  --studio-border-hover: #3b4156;
  
  --studio-accent: #f59e0b;
  --on-accent: #1a1205;
  --studio-accent-hover: #d97706;
  --studio-accent-cta: #d97706;
  --studio-accent-subtle: rgba(245, 158, 11, 0.12);
  /* --- Emas pohon sanad (v169) ---
     Dipakai khusus di pohon tasyjir: simpul mushannif diisi emas penuh dan
     simpul Rasulullah diberi cincin emas. Nilai sama dengan --studio-accent
     karena itulah emas tema ini — dibuat token terpisah supaya maknanya jelas
     (emas = kemuliaan sanad) dan tidak tertukar dengan aksen tombol. */
  --studio-gold: #f59e0b;
  --studio-gold-glow: rgba(245, 158, 11, 0.45);
  /* --- Dot Grid Background (Fase 7 v117) --- */
  --grid-dot-color: rgba(245, 158, 11, 0.11);
  --grid-dot-size: 1.5px;
  --grid-gap: 32px;
  --grid-glow-1: rgba(245, 158, 11, 0.10);
  --grid-glow-2: rgba(120, 90, 255, 0.06);
  --grid-fade: 0.55;
  /* --- Dot -> Buku Mini Background (Fase 13 v124) --- */
  --book-particle-idle: 245, 158, 11;    /* RGB titik & buku mini */
  --book-particle-form: 245, 158, 11;
  --book-particle-opacity: 0.17;         /* kehalusan */
  --book-particle-size: 1.6;
  --book-gap: 28;                        /* jarak antar titik (px) */
  --book-mini-w: 9;                      /* lebar buku mini (px) */
  --book-mini-h: 7;                      /* tinggi buku mini (px) */
  --studio-accent-border: rgba(245, 158, 11, 0.28);
  
  --studio-primary: #f8fafc;
  --studio-secondary: #cbd5e1;
  --studio-muted: #94a3b8;

  /* Canonical Turats Color Tokens (§4.2.2)
     FASE 3 (v113): dijadikan ALIAS murni ke --studio-* agar SATU sumber kebenaran.
     Mengubah --studio-* otomatis mengubah --color-* (mencegah drift nilai). */
  --color-bg: var(--studio-bg);
  --color-surface: var(--studio-surface);
  --color-surface-2: var(--studio-hover);
  --color-surface-sunk: var(--studio-deck);
  --color-border: var(--studio-border);
  --color-border-strong: var(--studio-border-hover);
  --color-text: var(--studio-primary);
  --color-text-muted: var(--studio-muted);
  --color-text-subtle: var(--studio-muted);
  --color-text-arabic: var(--studio-primary);
  --color-accent: var(--studio-accent);
  --color-accent-hover: var(--studio-accent-hover);
  --color-accent-soft: var(--studio-accent-subtle);
  --color-accent-border: var(--studio-accent-border);

  /* Semantic Hadith Grades Tokens (§4.2.3) */
  --grade-shahih-bg: #132218;
  --grade-shahih-text: #7cc698;
  --grade-shahih-border: #234a31;

  --grade-hasan-bg: #101a24;
  --grade-hasan-text: #79b1e0;
  --grade-hasan-border: #22405c;

  --grade-dhaif-bg: #231a0d;
  --grade-dhaif-text: #d8a857;
  --grade-dhaif-border: #4a3818;

  --grade-maudu-bg: #251111;
  --grade-maudu-text: #e08a84;
  --grade-maudu-border: #4f2320;

  --grade-unknown-bg: #1a1c1f;
  --grade-unknown-text: #8f8d87;
  --grade-unknown-border: #2c3035;

  /* Solid Accent Grades (teks ikon/chip, bukan badge) */
  --grade-accent-shahih: #7cc698;
  --grade-accent-hasan: #79b1e0;
  --grade-accent-dhaif: #d8a857;
  --grade-accent-maudu: #e08a84;
  --grade-accent-muttafaq: #34b27b;
  --grade-accent-mutabaah: #4f8fc4;
  --grade-accent-neutral: #8f8d87;

  /* Legacy Semantic Support */
  --zanjar-green: #10b981;
  --zanjar-green-bg: rgba(16, 185, 129, 0.12);
  --zanjar-green-border: rgba(16, 185, 129, 0.28);

  --hasan-amber: #f59e0b;
  --hasan-amber-bg: rgba(245, 158, 11, 0.12);
  --hasan-amber-border: rgba(245, 158, 11, 0.28);

  --shinjraf-red: #f43f5e;
  --shinjraf-red-bg: rgba(244, 63, 94, 0.12);
  --shinjraf-red-border: rgba(244, 63, 94, 0.28);

  --lazward-blue: #38bdf8;
  --lazward-blue-bg: rgba(56, 189, 248, 0.12);
  --lazward-blue-border: rgba(56, 189, 248, 0.28);

  --mawdu-purple: #c084fc;
  --mawdu-purple-bg: rgba(192, 132, 252, 0.12);
  --mawdu-purple-border: rgba(192, 132, 252, 0.28);

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.70);

  /* ------------------------------------------------------------------------
     LEGACY ALIAS MAP (Epik 1.4 — UI/UX Cleanup v111)
     Token warisan yang dipakai app.js/inline style tapi TAK pernah didefinisikan
     (127 kemunculan "ghost token"). Di-alias ke token resmi --studio-* agar
     seluruh UI ikut tema Dark/Light secara konsisten. Definisi di kedua scope
     (dark & light) menjamin nilai selalu ter-resolve.
     ------------------------------------------------------------------------ */
  --apple-grey: var(--studio-muted);
  --apple-dark: var(--studio-primary);
  --apple-border: var(--studio-border);
  --apple-white: var(--studio-surface);
  --text: var(--studio-primary);
  --text-primary: var(--studio-primary);
  --text-secondary: var(--studio-secondary);
  --text-muted: var(--studio-muted);
  --accent-gold: var(--studio-accent);
  --accent-teal: var(--studio-accent);
  --ink-secondary: var(--studio-secondary);
  --bg-card: var(--studio-surface);
  --card-bg: var(--studio-surface);
  --tadhhib-gold: var(--studio-accent);
}

/* --------------------------------------------------------------------------
   PALET LIGHT MODE (Crisp Warm Alabaster)
   -------------------------------------------------------------------------- */
html.light-theme,
[data-theme="light"] {
  /* Studio Base Palette */
  --studio-bg: #f8fafc;
  --studio-surface: #ffffff;
  --studio-hover: #f1f5f9;
  --studio-deck: #f8fafc;
  
  --studio-border: #e2e8f0;
  --studio-border-hover: #cbd5e1;
  
  --studio-accent: #b45309;
  --on-accent: #ffffff;
  --studio-accent-hover: #92400e;
  --studio-accent-cta: #b45309;
  --studio-accent-subtle: rgba(180, 83, 9, 0.08);
  /* --- Emas pohon sanad (v169) — lihat keterangan di blok Dark.
     Versi terang memakai emas yang LEBIH GELAP (#b45309) supaya tulisan
     --studio-bg di atasnya tetap kontras; emas terang #f59e0b di atas latar
     putih akan membuat tulisan sulit dibaca. */
  --studio-gold: #b45309;
  --studio-gold-glow: rgba(180, 83, 9, 0.35);
  /* --- Dot Grid Background (Fase 7 v117) --- */
  --grid-dot-color: rgba(180, 83, 9, 0.10);
  --grid-dot-size: 1.5px;
  --grid-gap: 32px;
  --grid-glow-1: rgba(245, 158, 11, 0.14);
  --grid-glow-2: rgba(120, 90, 255, 0.05);
  --grid-fade: 0.4;
  /* --- Dot -> Buku Mini Background (Fase 13 v124) --- */
  --book-particle-idle: 180, 83, 9;
  --book-particle-form: 180, 83, 9;
  --book-particle-opacity: 0.15;
  --book-particle-size: 1.6;
  --book-gap: 28;
  --book-mini-w: 9;
  --book-mini-h: 7;
  --studio-accent-border: rgba(180, 83, 9, 0.22);
  
  --studio-primary: #0f172a;
  --studio-secondary: #334155;
  --studio-muted: #64748b;

  /* Canonical Turats Color Tokens (§4.2.1)
     FASE 3 (v113): alias murni ke --studio-* (lihat blok Dark untuk keterangan). */
  --color-bg: var(--studio-bg);
  --color-surface: var(--studio-surface);
  --color-surface-2: var(--studio-hover);
  --color-surface-sunk: var(--studio-deck);
  --color-border: var(--studio-border);
  --color-border-strong: var(--studio-border-hover);
  --color-text: var(--studio-primary);
  --color-text-muted: var(--studio-muted);
  --color-text-subtle: var(--studio-muted);
  --color-text-arabic: var(--studio-primary);
  --color-accent: var(--studio-accent);
  --color-accent-hover: var(--studio-accent-hover);
  --color-accent-soft: var(--studio-accent-subtle);
  --color-accent-border: var(--studio-accent-border);

  /* Semantic Hadith Grades Tokens (§4.2.3) */
  --grade-shahih-bg: #e8f2ea;
  --grade-shahih-text: #1e5c36;
  --grade-shahih-border: #bcd9c5;

  --grade-hasan-bg: #eaf0f7;
  --grade-hasan-text: #1f4e79;
  --grade-hasan-border: #c2d5e8;

  --grade-dhaif-bg: #fbf1e2;
  --grade-dhaif-text: #8a5a12;
  --grade-dhaif-border: #e8d2ac;

  --grade-maudu-bg: #fbebea;
  --grade-maudu-text: #8c2b24;
  --grade-maudu-border: #eec6c3;

  --grade-unknown-bg: #f0eeea;
  --grade-unknown-text: #5c564d;
  --grade-unknown-border: #ddd7cd;

  /* Solid Accent Grades (teks ikon/chip, bukan badge) */
  --grade-accent-shahih: #1e5c36;
  --grade-accent-hasan: #1f4e79;
  --grade-accent-dhaif: #8a5a12;
  --grade-accent-maudu: #8c2b24;
  --grade-accent-muttafaq: #059669;
  --grade-accent-mutabaah: #2563eb;
  --grade-accent-neutral: #5c564d;

  /* Legacy Semantic Support */
  --zanjar-green: #059669;
  --zanjar-green-bg: rgba(5, 150, 105, 0.08);
  --zanjar-green-border: rgba(5, 150, 105, 0.22);

  --hasan-amber: #d97706;
  --hasan-amber-bg: rgba(217, 119, 6, 0.08);
  --hasan-amber-border: rgba(217, 119, 6, 0.22);

  --shinjraf-red: #e11d48;
  --shinjraf-red-bg: rgba(225, 29, 72, 0.08);
  --shinjraf-red-border: rgba(225, 29, 72, 0.22);

  --lazward-blue: #0284c7;
  --lazward-blue-bg: rgba(2, 132, 199, 0.08);
  --lazward-blue-border: rgba(2, 132, 199, 0.22);

  --mawdu-purple: #9333ea;
  --mawdu-purple-bg: rgba(147, 51, 234, 0.08);
  --mawdu-purple-border: rgba(147, 51, 234, 0.22);

  /* Elevation & Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.12);

  /* Legacy Alias Map — Light Mode (lihat blok Dark untuk keterangan) */
  --apple-grey: var(--studio-muted);
  --apple-dark: var(--studio-primary);
  --apple-border: var(--studio-border);
  --apple-white: var(--studio-surface);
  --text: var(--studio-primary);
  --text-primary: var(--studio-primary);
  --text-secondary: var(--studio-secondary);
  --text-muted: var(--studio-muted);
  --accent-gold: var(--studio-accent);
  --accent-teal: var(--studio-accent);
  --ink-secondary: var(--studio-secondary);
  --bg-card: var(--studio-surface);
  --card-bg: var(--studio-surface);
  --tadhhib-gold: var(--studio-accent);
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}