/* ==========================================================================
   variables.css — Token desain LMS SMP Negeri 19 Kota Bekasi
   Palet: merah-putih (aksen nasional) + navy/abu netral profesional.
   ========================================================================== */

:root {
  /* --- Warna inti --- */
  --merah:        #C81E1E;
  --merah-600:    #A81818;
  --merah-50:     #FDECEC;
  --putih:        #FFFFFF;

  --navy:         #0F2C4C;
  --navy-700:     #143A63;
  --navy-600:     #1B4A7A;
  --navy-500:     #2A639D;
  --navy-50:      #EAF1F8;

  --abu-50:       #F7F8FA;
  --abu-100:      #EEF1F5;
  --abu-200:      #DDE3EA;
  --abu-300:      #C7D0DA;
  --abu-400:      #9AA5B1;
  --abu-500:      #78838F;
  --abu-600:      #5A6773;
  --abu-800:      #2E3844;
  --abu-900:      #1F2933;

  /* --- Semantik --- */
  --bg:              var(--abu-50);
  --bg-elevated:     var(--putih);
  --surface:         var(--putih);
  --surface-alt:     var(--abu-100);
  --border:          var(--abu-200);
  --border-strong:   var(--abu-300);
  --teks:            var(--abu-900);
  --teks-lembut:     var(--abu-600);
  --teks-samar:      var(--abu-500);
  --primary:         var(--navy-600);
  --primary-hover:   var(--navy-700);
  --primary-ink:     var(--putih);
  --aksen:           var(--merah);
  --aksen-soft:      var(--merah-50);

  --sukses:      #0E7C5A;
  --sukses-bg:   #E4F5EE;
  --peringatan:  #B45309;
  --peringatan-bg:#FEF3E2;
  --bahaya:      var(--merah);
  --bahaya-bg:   var(--merah-50);
  --info:        var(--navy-600);
  --info-bg:     var(--navy-50);

  /* --- Tipografi --- */
  --font-heading: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  --lh-tight: 1.25;
  --lh-base:  1.6;

  /* --- Skala spasi (kelipatan 4px) --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* --- Radius & shadow --- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;
  --sh-sm: 0 1px 2px rgba(15, 44, 76, .06);
  --sh-md: 0 4px 12px rgba(15, 44, 76, .08);
  --sh-lg: 0 12px 32px rgba(15, 44, 76, .12);
  --sh-focus: 0 0 0 3px rgba(27, 74, 122, .28);

  /* --- Layout --- */
  --sidebar-w: 260px;
  --topbar-h: 62px;
  --container: 1200px;

  --tr-cepat: 140ms ease;
  --tr-sedang: 240ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================ DARK MODE ============================ */
[data-theme='dark'] {
  --bg:            #0E1621;
  --bg-elevated:   #16212E;
  --surface:       #16212E;
  --surface-alt:   #1D2A38;
  --border:        #2A3A4B;
  --border-strong: #3A4C60;
  --teks:          #E7EDF3;
  --teks-lembut:   #A9B7C6;
  --teks-samar:    #8A99A8;
  --primary:       #4E9BD6;
  --primary-hover: #6BB0E4;
  --primary-ink:   #08121C;
  --aksen:         #E85A5A;
  --aksen-soft:    #3A1B1B;

  --sukses-bg:     #123027;
  --peringatan-bg: #33260F;
  --bahaya-bg:     #3A1B1B;
  --info-bg:       #142A40;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .45);
  --sh-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* Preferensi ukuran font (aksesibilitas — Section 10) */
html[data-fontsize='besar']  { font-size: 17px; }
html[data-fontsize='besar2'] { font-size: 19px; }