/* ── NineLingo design tokens — navy + pirus ───────────────────────────────────────────
   3 lapis: primitive → semantic → komponen.
   Tema terang = default ("Kertas"), tema gelap = "Navy Lab".
   Navy = kedalaman & kepercayaan; pirus (mata maskot Nino) = aksen.      */

:root {
  /* primitive — warna */
  --ink-950:#060e1c; --ink-900:#0a1528; --ink-850:#0e1c33; --ink-800:#13233f;
  --ink-750:#192c4c; --ink-700:#21375c; --ink-600:#304a74; --ink-500:#4a6591;
  --ink-400:#6d86ae; --ink-300:#9cb0cf; --ink-200:#c6d3e7; --ink-100:#e6edf7;
  --ink-050:#f3f6fb; --white:#ffffff;

  --violet-600:#5b4bd6; --violet-500:#6c5ce7; --violet-400:#8878f0; --violet-300:#a99bf7;
  --mint-600:#0f9d76; --mint-500:#17c493; --mint-400:#4bdcb2; --mint-300:#8ceed2;
  --amber-600:#d98a04; --amber-500:#f0a91d; --amber-400:#f7c25a;
  --rose-600:#d8465f; --rose-500:#f0576f; --rose-400:#f88a9b;
  --sky-500:#2ea8e6; --sky-400:#63c4f2;
  --teal-700:#0a7563; --teal-600:#0c8e78; --teal-500:#1cb89a; --teal-400:#35cfae; --teal-300:#7fe6cf;
  /* amber hangat dari bulu Nino — aksen sekunder, dipakai hemat */
  --fur-500:#e2a95c; --fur-300:#f4c57f;
  --coral-600:#e11d48; --coral-500:#fb5f74; --coral-400:#fb8090;

  /* primitive — huruf */
  --font-sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.875rem;
  --fs-base:.9375rem; --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.5rem;
  --fs-3xl:1.9375rem; --fs-4xl:2.5rem; --fs-5xl:3.25rem;

  /* primitive — ruang & bentuk */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;

  --ease:cubic-bezier(.22,.68,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.14s; --dur-2:.24s; --dur-3:.42s;

  --nav-w:264px; --topbar-h:60px; --max-read:72ch;
}

/* ── tema gelap (default) ─────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:            var(--ink-950);
  --bg-elev:       var(--ink-900);
  --surface:       #0e1c3399;
  --surface-solid: var(--ink-850);
  --surface-2:     var(--ink-800);
  --surface-3:     var(--ink-750);
  --line:          #ffffff14;
  --line-strong:   #ffffff26;
  --text:          var(--ink-100);
  --text-soft:     var(--ink-300);
  /* #6f79a8 (ink-400) hanya mencapai 3.68:1 di atas --surface-3 —
     di bawah ambang WCAG AA 4.5:1 untuk teks seukuran ini, padahal
     warna ini dipakai untuk subjudul kartu dan label statistik yang
     memang perlu terbaca. Dinaikkan ke 5.2:1. */
  --text-mute:     #8ea1c4;
  --text-invert:   var(--ink-950);

  --brand:         var(--teal-500);
  --brand-soft:    #1cb89a2e;
  --brand-text:    var(--teal-300);
  --accent:        var(--coral-500);
  --ok:            var(--mint-500);
  --ok-soft:       #17c4932b;
  --warn:          var(--amber-500);
  --warn-soft:     #f0a91d29;
  --bad:           var(--rose-500);
  --bad-soft:      #f0576f29;
  --info:          var(--sky-500);
  --info-soft:     #2ea8e629;

  /* Ungu khusus badan pelajaran. TIDAK boleh memakai --brand: langctx.js
     menimpa --brand dengan warna khas tiap bahasa, jadi kartu "Rumus"
     ikut berubah — di Jerman malah jadi abu-abu #4a5568 dan peran
     kartunya hilang. Warna peran harus sama di sembilan bahasa. */
  --ajar-ungu:      var(--violet-400);
  --ajar-ungu-soft: #6c5ce72e;

  --glow: radial-gradient(1100px 520px at 12% -12%, #1cb89a2b, transparent 62%),
          radial-gradient(900px 460px at 96% 4%, #f4c57f18, transparent 60%);
  --shadow-1: 0 1px 2px #0006;
  --shadow-2: 0 8px 26px -12px #000c, 0 2px 8px -4px #0009;
  --shadow-3: 0 28px 70px -28px #000f, 0 8px 24px -12px #000c;
  --ring: 0 0 0 3px #1cb89a55;
}

/* ── tema terang ──────────────────────────────────────────────── */
:root, :root[data-theme="light"] {
  --bg:            #f4f7fb;
  --bg-elev:       #ffffff;
  --surface:       #ffffffcc;
  --surface-solid: #ffffff;
  --surface-2:     #eef2f8;
  --surface-3:     #e2e8f2;
  --line:          #0a152814;
  --line-strong:   #0a152826;
  --text:          #0b1a31;
  --text-soft:     #3f4f6b;
  /* Warna berikut dipilih agar rasio kontrasnya terhadap latar terang
     minimal 4.5:1 — ambang WCAG AA untuk teks berukuran biasa. */
  --text-mute:     #56668a;
  --text-invert:   #ffffff;

  --brand:         var(--teal-600);
  --brand-soft:    #1cb89a1f;
  --brand-text:    var(--teal-700);
  --accent:        var(--coral-600);
  --ok:            #07795a;
  --ok-soft:       #17c4931f;
  --warn:          #8a5600;
  --warn-soft:     #f0a91d24;
  --bad:           #b81d3f;
  --bad-soft:      #f0576f1f;
  --info:          #14688f;
  --info-soft:     #2ea8e61f;
  --ajar-ungu:      var(--violet-600);
  --ajar-ungu-soft: #6c5ce71c;

  --glow: radial-gradient(1000px 480px at 10% -14%, #1cb89a1c, transparent 60%),
          radial-gradient(800px 420px at 98% 0%, #f4c57f22, transparent 58%);
  --shadow-1: 0 1px 2px #0b1a3112;
  --shadow-2: 0 10px 28px -16px #0b1a313d, 0 2px 6px -3px #0b1a311f;
  --shadow-3: 0 30px 70px -32px #0b1a3147, 0 8px 22px -14px #0b1a312e;
  --ring: 0 0 0 3px #1cb89a44;
}

/* warna level CEFR — dipakai lencana, garis, grafik */
:root {
  --lv-a1:#4bdcb2; --lv-a2:#17c493; --lv-b1:#63c4f2;
  --lv-b2:#8878f0; --lv-c1:#f0a91d; --lv-c2:#f0576f;
  --sk-listening:#63c4f2; --sk-speaking:#f0a91d;
  --sk-reading:#8878f0;  --sk-writing:#17c493;
  --sk-grammar:#f0576f;  --sk-vocab:#4bdcb2;
}