/*
  Token desain, diturunkan 1:1 dari DESIGN.md. Jangan menambah atau mengubah nilai di sini
  tanpa memperbarui DESIGN.md terlebih dahulu. Dokumen itu sumber kebenarannya, file ini
  cuma implementasinya.

  data-tema="terang" dan data-tema="gelap" untuk pilihan eksplisit pengguna (toggle).
  Tanpa atribut, tema mengikuti prefers-color-scheme sistem (DESIGN.md bagian 9).
*/

/* IBM Plex, di-host sendiri (DESIGN.md 3, "Pemuatan"). Subset latin, hanya berat yang
   dipakai. Sans 400 dan 600 di-preload dari <head> di Layout.tsx. Lisensi: fonts/LICENSE-IBM-Plex.txt */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  /* --- Warna, DESIGN.md bagian 2 (terang, default) --- */
  --kertas: #f7f7f5;
  --permukaan: #ffffff;
  --tinta: #14181d;
  --tinta-2: #5a636e;
  --garis: #e4e5e1;
  --garis-kuat: #6b7280;
  --laut: #1266c8;
  --promo: #a8431e;
  --galat: #a32017;
  --sukses: #1b5e3f;

  /* Teks di atas warna isi. Berubah di mode gelap karena --laut/--promo jadi terang. */
  --teks-di-laut: #ffffff;
  --laut-hover: #0f57ad;
  --teks-di-promo: #ffffff;
  --teks-di-sukses: #ffffff; /* tombol "Masuk keranjang", 7,72:1 di atas --sukses */

  /* Hero gelap, DESIGN.md 2 "Hero gelap". Sama di kedua mode, hanya dipakai di dalam hero. */
  --hero-latar: #07122a;
  --hero-latar-2: #0b1d40;
  --hero-chip: #0f2552;
  --hero-jejak: #24477f;
  --hero-halo: #2a5caa;
  --hero-pin: #3f7fe0;
  --hero-pulsa: #5aa9ff;
  --hero-simpul: #7fbfff;
  --hero-chip-teks: #cfe4ff;
  --hero-tinta: #f2f6fc;
  --hero-tinta-2: #b7c5da;
  --hero-garis-kuat: #8499b8;

  /* Footer navy gelap solid, DESIGN.md 2 "Footer" (tahap 6a B0, menggantikan blue-slate A2.5).
     Satu warna datar tanpa gradien, sama di kedua mode. Rasio diukur di atas --kaki-latar. */
  --kaki-latar: #0c1b32;
  --kaki-tinta: #d5dee7; /* teks biasa, 12,66:1 */
  --kaki-tautan: #9fb3c8; /* tautan, 8,01:1 */
  --kaki-tautan-hover: #ffffff; /* 17,23:1 */
  --kaki-judul: #ffffff; /* judul kolom dan wordmark, 17,23:1 */
  --kaki-garis: #2d4462; /* pemisah dua baris, dekoratif */
  --kaki-fokus: #ffffff; /* cincin fokus, 17,23:1 */

  /* Area akun (/masuk, /dashboard/*), DESIGN.md 2 "Area akun" (tahap 6a B1). Navy sedikit
     lebih terang dan lebih biru dari mode gelap biasa, satu keluarga dengan --kaki-latar.
     Dipakai lewat blok :root[data-area="akun"] di bawah, tidak langsung di komponen. */
  --akun-latar: #0f1b30; /* latar halaman */
  --akun-permukaan: #16243d; /* kartu, panel, input, header */
  --akun-garis: #2b3f5e; /* pemisah dekoratif */
  --akun-garis-kuat: #7c8fad; /* batas input dan kontrol, 4,72:1 vs permukaan */
  --akun-tinta-2: #9fb3c8; /* teks sekunder, 7,21:1 vs permukaan (nilai --kaki-tautan) */

  /* Aksen emas, HANYA /dashboard/* (tahap 6d-2b), DESIGN.md 9 "Aksen emas, area course".
     Nilai diambil dari piksel bintang di logo resmi (public/brand/logo-app.png), bukan
     ditebak. Dipakai lewat blok :root[data-shell="dashboard"] di bawah, tidak langsung di
     komponen (kecuali .label-modul-nomor dan border kartu, lihat DESIGN.md). */
  --emas-utama: #fcc809; /* aksi utama, tautan, cincin fokus, judul kartu modul saat hover */
  --emas-terang: #fded69; /* hover/highlight tombol utama */
  --amber-redup: #d16002; /* border kartu (.kartu-course-dash, .kartu-modul) */
  --glow-emas: color-mix(in srgb, var(--emas-utama) 45%, transparent); /* pendar radial */
  --teks-di-emas: #10141a; /* teks di atas latar emas, 11,79:1 - putih gagal AA */
  /* Tombol "Course" hero Beranda (tahap 6e-A, DESIGN.md 2 "Hero gelap"): teks oranye-cokelat
     keemasan di atas kotak bertinta emas tipis. Dipilih (bukan --emas-utama/--emas-terang yang
     kuning terang, atau --amber-redup yang gagal 4,5:1 di kotaknya) karena satu-satunya yang
     lolos AA di kotak DIAM dan HOVER sekaligus (contrast-check.py: 7,16:1 dan 5,75:1). */
  --emas-oranye: #f0a868;

  /* FAB WhatsApp: hijau resmi WhatsApp, bukan bagian dari palet aksen. Lihat DESIGN.md 8.3. */
  --wa: #25d366;
  --wa-tepi: #188a46; /* cincin 2px, wajib di mode terang (isi FAB gagal 3:1 tanpa ini) */
  --wa-glif: #14181d; /* glif gelap, glif putih gagal kontras di atas hijau ini */

  /* --- Tipografi, DESIGN.md bagian 3. @font-face di atas file ini. --- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ukuran-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --ukuran-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --ukuran-h3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --ukuran-lead: 1.125rem;
  --ukuran-body: 1rem;
  --ukuran-label: 0.875rem;
  --ukuran-harga-jual: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --ukuran-harga-coret: 0.9375rem;

  --tinggi-baris-heading: 1.2;
  --tinggi-baris-body: 1.6;
  --berat-heading: 600;
  --berat-body: 400;
  --berat-label: 500;

  /* --- Ruang, DESIGN.md bagian 4. Basis 4px. --- */
  --ruang-1: 4px;
  --ruang-2: 8px;
  --ruang-3: 12px;
  --ruang-4: 16px;
  --ruang-5: 24px;
  --ruang-6: 32px;
  --ruang-7: 48px;
  --ruang-8: 64px;
  --ruang-9: 96px;

  /* Berubah per titik patah, lihat media query di bawah. */
  --section-py: var(--ruang-7);
  --halaman-px: var(--ruang-4);
  --jarak-kartu: var(--ruang-4);
  /* Grid katalog rapat (tahap 6a A3): 12px ponsel, 16px mulai 640px. */
  --jarak-kartu-rapat: var(--ruang-3);
  --jarak-field: var(--ruang-4);
  --tinggi-header: 64px;
  --tinggi-header-ringkas: 52px;

  --lebar-konten-maks: 72rem;
  --lebar-baca-maks: 68ch;

  /* --- Radius, DESIGN.md bagian 6. Variasi = alat hierarki, bukan hiasan. --- */
  --radius-0: 0;
  --radius-badge: 4px;
  --radius-kartu: 8px;
  --radius-panel: 12px;
  --radius-penuh: 999px; /* HANYA tombol WA melayang dan avatar */

  /* --- Bayangan, DESIGN.md bagian 6. Hanya untuk benda yang benar-benar mengambang. --- */
  --naik: 0 1px 2px rgb(20 24 29 / 0.08);
  --melayang: 0 4px 12px rgb(20 24 29 / 0.12);
  --lapis: 0 12px 32px rgb(20 24 29 / 0.2);

  /* --- Gerak, DESIGN.md bagian 7. MOTION 1 di luar hero; aliran jalur hero di base.css. --- */
  --durasi-mikro: 120ms;
  --durasi-menu: 180ms;
  /* Umpan balik tombol utama (naik saat hover, mengecil saat ditekan), DESIGN.md 7. */
  --durasi-tombol: 180ms;
  --durasi-header: 200ms; /* header menipis saat digulir, DESIGN.md 8.7 */
  --easing-keluar: ease-out;
}

/* Mengikuti preferensi sistem selama pengguna belum memilih tema secara eksplisit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --kertas: #10141a;
    --permukaan: #1a1f27;
    --tinta: #e8eaed;
    --tinta-2: #9ba4b0;
    --garis: #262c36;
    --garis-kuat: #6e7887;
    --laut: #4f9bee;
    --promo: #e8875a;
    --galat: #f4a9a3;
    --sukses: #7fd1a6;

    --teks-di-laut: #10141a;
    --laut-hover: #7ab4f2;
    --teks-di-promo: #14181d;
    --teks-di-sukses: #10141a;

    --wa: #25d366;
    --wa-tepi: transparent; /* isi hijau sudah 9,31:1 vs kertas gelap, cincin tidak perlu */
    --wa-glif: #14181d;
  }
}

/* Pilihan eksplisit lewat toggle, menang atas prefers-color-scheme di kedua arah.
   [data-tema-lokal="gelap"]: halaman gelap penuh (hanya <main> di /ai, DESIGN.md 9). Nilainya
   sengaja sama persis dengan mode gelap, jadi rasio kontras yang sudah diukur tetap berlaku. */
:root[data-tema="gelap"],
[data-tema-lokal="gelap"] {
  --kertas: #10141a;
  --permukaan: #1a1f27;
  --tinta: #e8eaed;
  --tinta-2: #9ba4b0;
  --garis: #262c36;
  --garis-kuat: #6e7887;
  --laut: #4f9bee;
  --promo: #e8875a;
  --galat: #f4a9a3;
  --sukses: #7fd1a6;

  --teks-di-laut: #10141a;
  --laut-hover: #7ab4f2;
  --teks-di-promo: #14181d;
  --teks-di-sukses: #10141a;

  --wa: #25d366;
  --wa-tepi: transparent;
  --wa-glif: #14181d;
}

/* Area akun, DESIGN.md 9 "Area akun": selalu gelap, apa pun tema pengunjung. Atribut
   data-area dipasang server di <html> (Layout.tsx), bukan dari localStorage, jadi pilihan
   tema pengunjung tidak disentuh dan kembali begitu keluar dari area ini. Sengaja ditaruh
   SETELAH blok gelap dan media query di atas: spesifisitasnya sama (0,2,0), urutan yang
   menentukan. Nilai selain lima token --akun-* sama dengan mode gelap. */
:root[data-area="akun"] {
  --kertas: var(--akun-latar);
  --permukaan: var(--akun-permukaan);
  --tinta: #e8eaed;
  --tinta-2: var(--akun-tinta-2);
  --garis: var(--akun-garis);
  --garis-kuat: var(--akun-garis-kuat);
  --laut: #4f9bee;
  --promo: #e8875a;
  --galat: #f4a9a3;
  --sukses: #7fd1a6;

  --teks-di-laut: #10141a;
  --laut-hover: #7ab4f2;
  --teks-di-promo: #14181d;
  --teks-di-sukses: #10141a;

  --wa: #25d366;
  --wa-tepi: transparent;
  --wa-glif: #14181d;
}

/* Aksen emas, HANYA /dashboard/* (tahap 6d-2b, DESIGN.md 9 "Aksen emas, area course").
   Atribut data-shell dipasang server di <html> (Layout.tsx) saat dashboardShell aktif,
   TIDAK di /masuk (areaAkun saja, tetap biru). Ditaruh SETELAH blok akun di atas: spesifisitas
   sama (0,2,0), urutan yang menang. Menimpa token generik yang sudah dipakai komponen
   dashboard (tombol utama, progress bar, tab aktif, cincin fokus, chip "Selesai") supaya
   semuanya ikut emas tanpa kode baru di komponen. */
:root[data-shell="dashboard"] {
  --laut: var(--emas-utama);
  --laut-hover: var(--emas-terang);
  --teks-di-laut: var(--teks-di-emas);
  --sukses: var(--emas-utama); /* satu-satunya chip-status-sukses di /dashboard/* = "Selesai" */
  --teks-di-sukses: var(--teks-di-emas);
}

/* Glow, DESIGN.md 6: HANYA saat hover di .tombol-utama dan .kartu-produk. Dideklarasikan di
   setiap cakupan tema (bukan hanya :root) karena var(--laut) di dalamnya dihitung di elemen
   tempat --glow dideklarasikan; tanpa ini <main> gelap di /ai mewarisi glow biru mode terang.
   [data-shell="dashboard"] TIDAK perlu baris sendiri di sini: atributnya di <html>, elemen
   yang sama dengan :root, jadi --glow yang dideklarasikan :root di bawah sudah menghitung
   ulang var(--laut) dengan nilai emas dari blok data-shell di atas (menang lewat urutan). */
:root,
[data-tema-lokal="gelap"] {
  --glow: 0 0 0 3px color-mix(in srgb, var(--laut) 22%, transparent),
    0 8px 24px -8px color-mix(in srgb, var(--laut) 55%, transparent);
}

/* Titik patah, DESIGN.md bagian 4 dan 5. Tiga keadaan, bukan dua. */
@media (min-width: 640px) {
  :root {
    --section-py: var(--ruang-8);
    --halaman-px: var(--ruang-5);
    --jarak-kartu: var(--ruang-5);
    --jarak-kartu-rapat: var(--ruang-4);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-py: var(--ruang-9);
    --halaman-px: var(--ruang-6);
    --jarak-kartu: var(--ruang-6);
    --jarak-field: var(--ruang-5);
  }
}

/* DESIGN.md bagian 7: hormati prefers-reduced-motion dengan mematikan semua transisi. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}