/* ── SankaLingo GO design tokens ───────────────────────────────────────────
   3 lapis: primitive → semantic → komponen.
   Tema gelap = default ("Midnight Indigo"), tema terang = "Paper".      */

:root {
  /* primitive — warna */
  --ink-950:#080a14; --ink-900:#0c0f1c; --ink-850:#111527; --ink-800:#161b31;
  --ink-750:#1c2240; --ink-700:#232a4d; --ink-600:#333c66; --ink-500:#4c5688;
  --ink-400:#6f79a8; --ink-300:#9aa3c8; --ink-200:#c3c9e2; --ink-100:#e5e8f4;
  --ink-050:#f4f5fb; --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;

  /* 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, :root[data-theme="dark"] {
  --bg:            var(--ink-950);
  --bg-elev:       var(--ink-900);
  --surface:       #10142499;
  --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:     #8b94bd;
  --text-invert:   var(--ink-950);

  --brand:         var(--violet-500);
  --brand-soft:    #6c5ce72e;
  --brand-text:    var(--violet-300);
  --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%, #6c5ce730, transparent 62%),
          radial-gradient(900px 460px at 96% 4%, #17c49322, 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 #6c5ce755;
}

/* ── tema terang ──────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:            #f6f6fb;
  --bg-elev:       #ffffff;
  --surface:       #ffffffcc;
  --surface-solid: #ffffff;
  --surface-2:     #f1f2f9;
  --surface-3:     #e7e9f4;
  --line:          #0a0e2914;
  --line-strong:   #0a0e2926;
  --text:          #13172b;
  --text-soft:     #4a5170;
  /* Warna berikut dipilih agar rasio kontrasnya terhadap latar terang
     minimal 4.5:1 — ambang WCAG AA untuk teks berukuran biasa. */
  --text-mute:     #5b628a;
  --text-invert:   #ffffff;

  --brand:         var(--violet-600);
  --brand-soft:    #6c5ce71f;
  --brand-text:    var(--violet-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%, #6c5ce71f, transparent 60%),
          radial-gradient(800px 420px at 98% 0%, #17c4931a, transparent 58%);
  --shadow-1: 0 1px 2px #131a3a12;
  --shadow-2: 0 10px 28px -16px #131a3a3d, 0 2px 6px -3px #131a3a1f;
  --shadow-3: 0 30px 70px -32px #131a3a47, 0 8px 22px -14px #131a3a2e;
  --ring: 0 0 0 3px #6c5ce744;
}

/* 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;
}