/* ============================================================================
   GuruSmartAI — Token Visual Kanonik (P0 sistem desain)
   ----------------------------------------------------------------------------
   SATU sumber warna, radius, spasi, dan bayangan untuk SELURUH permukaan.

   Sebelumnya berjalan 4 sistem paralel dengan penamaan berbeda:
     landing.css / dashboard.css → --primary, --ink, --line
     styles.css (agent)          → --primary, --ink, --line  (nilai sedikit beda)
     system.css (permukaan baru) → --brand,   --text, --border (warna berbeda)

   Palet kanonik mengikuti identitas yang SUDAH dipakai landing + dashboard
   (#5b3df5) — bukan memaksakan warna baru. Berkas ini juga menyediakan ALIAS
   lintas-penamaan sehingga semua CSS lama tetap berjalan tanpa disunting.

   Urutan muat: tokens.css DULU, lalu CSS halaman (halaman tetap bisa menimpa).
   ============================================================================ */

:root {
  /* ---- Merek (nilai yang sudah mapan di landing + dashboard) ---- */
  --gsa-brand:        #5b3df5;
  --gsa-brand-2:      #2168ff;
  --gsa-brand-accent: #7c3aed;
  --gsa-brand-soft:   rgba(91, 61, 245, .08);
  --gsa-brand-border: rgba(91, 61, 245, .28);
  --gsa-grad:         linear-gradient(135deg, var(--gsa-brand), var(--gsa-brand-2));

  /* ---- Netral terang ---- */
  --gsa-bg:        #f5f5fc;
  --gsa-bg-soft:   #f9f9fd;
  --gsa-surface:   #ffffff;
  --gsa-surface-2: #f0f2f8;
  --gsa-text:      #101430;
  --gsa-text-dim:  #5b6472;
  --gsa-line:      #e6e8f6;

  /* ---- Semantik ---- */
  --gsa-ok:      #15803d;  --gsa-ok-soft:      rgba(21,128,61,.10);
  --gsa-warn:    #b45309;  --gsa-warn-soft:    rgba(180,83,9,.10);
  --gsa-danger:  #b91c1c;  --gsa-danger-soft:  rgba(185,28,28,.10);

  /* ---- Bentuk & jarak ---- */
  --gsa-r-sm: 10px;  --gsa-r: 12px;  --gsa-r-lg: 16px;  --gsa-r-pill: 999px;
  --gsa-s1: 4px; --gsa-s2: 8px; --gsa-s3: 12px; --gsa-s4: 16px; --gsa-s5: 24px; --gsa-s6: 32px;
  --gsa-shadow:    0 1px 2px rgba(16,20,48,.06), 0 4px 16px rgba(16,20,48,.06);
  --gsa-shadow-lg: 0 20px 60px rgba(16,20,48,.28);

  /* ---- Tipografi: minimal 15px untuk isi (banyak guru berusia 40+) ---- */
  --gsa-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gsa-fs-body: 15px;  --gsa-lh-body: 1.55;

  /* ==========================================================
     ALIAS — agar CSS lama memakai palet yang sama tanpa diedit
     ========================================================== */
  --brand:  var(--gsa-brand);
  --brand-2:var(--gsa-brand-accent);
  --text:   var(--gsa-text);
  --dim:    var(--gsa-text-dim);
  --border: var(--gsa-line);
  --card:   var(--gsa-surface);
  --ok:     var(--gsa-ok);
  --warn:   var(--gsa-warn);
  --danger: var(--gsa-danger);
  --radius: var(--gsa-r);
  --radius-lg: var(--gsa-r-lg);
  --shadow: var(--gsa-shadow);
  --font:   var(--gsa-font);
}

/* ---- Mode gelap: satu definisi untuk semua permukaan ---- */
:root[data-theme="dark"] {
  --gsa-brand:        #8b85f0;
  --gsa-brand-2:      #5b9bff;
  --gsa-brand-accent: #a78bfa;
  --gsa-brand-soft:   rgba(139,133,240,.14);
  --gsa-brand-border: rgba(139,133,240,.34);

  --gsa-bg:        #0f1115;
  --gsa-bg-soft:   #141720;
  --gsa-surface:   #171a21;
  --gsa-surface-2: #1e222b;
  --gsa-text:      #e9ecf1;
  --gsa-text-dim:  #9aa4b2;
  --gsa-line:      #2a2f3a;

  --gsa-ok: #4ade80; --gsa-warn: #fbbf24; --gsa-danger: #f87171;
  --gsa-shadow:    0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.35);
  --gsa-shadow-lg: 0 20px 60px rgba(0,0,0,.55);
}

/* Hormati pengguna yang membatasi animasi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}