/* =============================================================================
   tokens.css — satu sumber untuk seluruh keputusan visual
   -----------------------------------------------------------------------------
   Dimuat PALING AWAL. Berkas lain hanya boleh memakai token dari sini, tidak
   menulis angka sendiri. Alasannya: sebelum ini ada ~40 ukuran huruf berbeda
   di satu berkas CSS, sehingga hierarki jadi kebetulan, bukan keputusan.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
   * RUANG — skala 4px. Hanya nilai ini yang boleh dipakai.
   * ------------------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------------------------------------------------------------------------
   * HURUF — 7 tingkat, cukup untuk seluruh aplikasi.
   * ------------------------------------------------------------------------ */
  --fs-display: 28px;   /* angka besar: total keaktifan, kode tugas   */
  --fs-h1: 20px;        /* judul halaman                              */
  --fs-h2: 17px;        /* judul kartu, nama kelas                    */
  --fs-h3: 15px;        /* judul baris daftar                         */
  --fs-body: 14px;      /* teks isi                                   */
  --fs-sm: 13px;        /* keterangan, sub-baris                      */
  --fs-xs: 11px;        /* label, lencana, meta                       */

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-tight: -0.015em;
  --tracking-wide: 0.04em;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------------------
   * RADIUS
   * ------------------------------------------------------------------------ */
  --r-sm: 8px;          /* input, tombol, lencana kotak */
  --r-md: 12px;         /* kartu, baris daftar          */
  --r-lg: 16px;         /* panel, modal                 */
  --r-full: 999px;      /* pil, chip, avatar            */

  /* ---------------------------------------------------------------------------
   * ELEVASI — dua tingkat saja. Pemisah utama adalah garis tepi.
   * ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);

  /* ---------------------------------------------------------------------------
   * WARNA — mode terang. Satu aksen; sisanya netral.
   * ------------------------------------------------------------------------ */
  --background: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --border: #e3e8ef;
  --border-strong: #cbd5e1;

  --text: #0f172a;
  --text-2: #475569;
  --text-muted: #64748b;
  --text-invert: #ffffff;

  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: #dbeafe;
  --primary-soft-2: #eff6ff;

  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --accent-b: #7c3aed;          /* Pekan B — dibedakan dari aksen utama */
  --accent-b-soft: #ede9fe;

  /* ---------------------------------------------------------------------------
   * UKURAN KERANGKA
   * ------------------------------------------------------------------------ */
  --tap: 44px;                  /* target sentuh minimum          */
  --topbar-h: 56px;
  --tabbar-h: 60px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --content-max: 1280px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------------------------------------------------------------------------
   * GERAK — pendek, hanya untuk menjelaskan perubahan.
   * ------------------------------------------------------------------------ */
  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(.2, .8, .3, 1);

  --z-sidebar: 30;
  --z-topbar: 40;
  --z-tabbar: 50;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 90;

  color-scheme: light;
}

/* =============================================================================
   MODE GELAP
   Dirancang ulang, bukan pembalikan warna: latar biru-abu gelap, permukaan
   bertingkat, dan aksen yang luminansinya dinaikkan agar kontras tetap terjaga.
   ========================================================================== */

:root[data-theme="dark"] {
  --background: #0b1220;
  --surface: #131c2e;
  --surface-2: #18233a;
  --surface-3: #1f2c46;
  --border: #253350;
  --border-strong: #35476a;

  --text: #e8eef8;
  --text-2: #b6c2d4;
  --text-muted: #8fa0b8;
  --text-invert: #ffffff;

  --primary: #60a5fa;
  --primary-strong: #3b82f6;
  --primary-soft: #1e3a63;
  --primary-soft-2: #16243d;

  --success: #4ade80;
  --success-soft: #14361f;
  --warning: #fbbf24;
  --warning-soft: #3a2c0c;
  --danger: #f87171;
  --danger-soft: #3b1616;
  --accent-b: #a78bfa;
  --accent-b-soft: #2e2450;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* =============================================================================
   DASAR
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] harus selalu menang atas display:flex/grid milik komponen */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }

code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 6px;
}

[data-lucide], .lucide { width: 20px; height: 20px; stroke-width: 2; flex: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------- kelas bantu umum --------------------------- */

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.clamp-1, .clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}