/* ==========================================================================
   VARIABLES.CSS
   Semua identitas visual (warna, font, radius, shadow, transisi) didefinisikan
   di sini sebagai CSS Custom Properties (variables).

   INTEGRASI LARAVEL:
   Karena semua warna memakai var(--...), Anda cukup meng-override nilai
   variable ini dari Blade tanpa menyentuh file CSS lain. Dua cara:

   1) Generate ulang file ini dari database (recommended untuk production):
      Route::get('/theme.css', ...) yang me-render view variables.blade.php
      lalu <link rel="stylesheet" href="{{ route('theme.css') }}">

   2) Override cepat lewat inline <style> di layout (cocok untuk live preview
      di halaman admin/pengaturan tema):

      <style>
        :root {
          --color-primary: {{ $sekolah->warna_primary ?? '#123A6B' }};
          --color-secondary: {{ $sekolah->warna_secondary ?? '#F2A93B' }};
        }
      </style>

   Lihat juga assets/js/theme.js untuk versi override lewat JavaScript
   (berguna kalau warna disimpan sebagai JSON dan diterapkan real-time,
   misalnya di color-picker halaman admin).
   ========================================================================== */

:root {
  /* ---------- Brand Colors (ubah 3 baris ini untuk ganti identitas) ------ */
  --color-primary: #123a6b;         /* Navy akademik - warna utama */
  --color-primary-dark: #0b2647;    /* Navy lebih gelap - hover/gradient */
  --color-primary-light: #e8eef7;   /* Navy sangat muda - background lembut */
  --color-secondary: #f2a93b;       /* Kuning emas - aksen/prestasi/CTA */
  --color-secondary-dark: #d88f1f;
  --color-accent: #2aa876;          /* Hijau emerald - aksen sekunder/growth */

  /* ---------- Neutrals ---------------------------------------------------*/
  --color-dark: #101828;            /* Untuk footer & section gelap */
  --color-dark-soft: #1c2a44;
  --color-light: #f7f9fc;           /* Background section terang */
  --color-white: #ffffff;
  --color-text: #2b2f38;
  --color-text-muted: #667085;
  --color-border: #e4e8f0;

  /* ---------- Typography --------------------------------------------------*/
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* ---------- Radius & Shadow ---------------------------------------------*/
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 10px 30px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.16);

  /* ---------- Layout --------------------------------------------------- */
  --container-width: 1200px;
  --header-height: 84px;

  /* ---------- Motion ------------------------------------------------------*/
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}