/*
 * color.css — REMBANG OPENDATA COLOR SCHEME
 * ==========================================
 * Single Source of Truth untuk semua warna utama tema.
 * Semua CSS lain WAJIB merujuk ke variabel di file ini.
 *
 * Cara kerja Color Scheme Switcher:
 *   JavaScript di color-scheme.js akan mengubah CSS variables
 *   di :root secara dinamis, sehingga semua warna berubah serentak.
 *   Pilihan disimpan di localStorage dengan key 'rembang-color-scheme'.
 *
 * Tersedia 3 scheme:
 *   - ocean (default):   #0064D6 — Biru Ocean
 *   - emerald:           #1abc9c — Hijau Canvas
 *   - royal:             #8e44ad — Ungu Royal
 */

/* ==========================================================================
   DEFAULT SCHEME: Ocean (#0064D6 — Biru Ocean)
   ========================================================================== */

:root {
  /* === Primary Brand Color === */
  --rembang-primary:           #0064D6;
  --rembang-primary-dark:      #0050ab;
  --rembang-primary-rgb:       0, 100, 214;
  --rembang-primary-light:     rgba(0, 100, 214, 0.12);
  --rembang-primary-muted:     rgba(0, 100, 214, 0.05);
  --rembang-primary-hover-bg:  rgba(0, 100, 214, 0.18);

  /* === Canvas Theme Compatibility ===
     Variabel berikut digunakan oleh file CSS lama yang masih
     menggunakan prefix --cnvs-. Disinkronkan agar tidak perlu
     refactor seluruh codebase sekaligus.
  */
  --cnvs-themecolor:       var(--rembang-primary);
  --cnvs-theme-color:      var(--rembang-primary);
  --cnvs-themecolor-rgb:   var(--rembang-primary-rgb);

  /* === Surface / Background Colors (tidak berubah antar scheme) === */
  --rembang-dark-bg:       #212529;
  --rembang-darker-bg:     #1a1c20;
  --rembang-dark-surface:  #1e2329;
  --rembang-dark-border:   rgba(255, 255, 255, 0.1);

  /* === Neutral Text Colors (tidak berubah antar scheme) === */
  --rembang-text-light:    #f8f9fa;
  --rembang-text-muted:    rgba(255, 255, 255, 0.7);
  --rembang-text-subtle:   rgba(255, 255, 255, 0.5);

  /* === Page Title Canvas Variables === */
  --cnvs-page-title-padding:           2rem;
  --cnvs-page-title-parallax-padding:  3rem;
  --cnvs-page-title-font-size:         1.5rem;
  --cnvs-page-title-parallax-font-size: calc(1.2rem + 0.6vw);
  --cnvs-page-title-color:             #fff;
  --cnvs-parallax-width:               100%;
  --cnvs-parallax-height:              130%;
  --cnvs-parallax-value:               0px;
}

/* ==========================================================================
   SCHEME: Ocean (#0064D6 — Biru Ocean)
   Applied via JS: document.documentElement.style.setProperty(...)
   ========================================================================== */
/*
  Referensi nilai untuk JS color-scheme.js:
  ocean: {
    primary:      '#0064D6',
    primaryDark:  '#0050ab',
    rgb:          '0, 100, 214',
  }
*/

/* ==========================================================================
   SCHEME: Royal (#8e44ad — Ungu Royal)
   Applied via JS: document.documentElement.style.setProperty(...)
   ========================================================================== */
/*
  Referensi nilai untuk JS color-scheme.js:
  royal: {
    primary:      '#8e44ad',
    primaryDark:  '#7d3c98',
    rgb:          '142, 68, 173',
  }
*/

/* ==========================================================================
   UTILITY CLASSES
   Gunakan class ini di HTML untuk warna yang ikut scheme aktif.
   ========================================================================== */

.bg-color {
  background-color: var(--rembang-primary) !important;
}

.text-color {
  color: var(--rembang-primary) !important;
}

.border-color {
  border-color: var(--rembang-primary) !important;
}

.bg-color-light {
  background-color: var(--rembang-primary-light) !important;
}

.text-color-dark {
  color: var(--rembang-primary-dark) !important;
}