/* ============================================================
   LAB DAKWAH — Design Tokens: Biru Telur Asin v1.1
   Consolidated — 2026-06-12

   MODE: Light — Digunakan di semua halaman dashboard internal
   PAGES: dashboard-promosi, dashboard-live, dashboard-analitik,
          link-manager, login, inventaris, peminjaman, kpi, utbk
   ============================================================ */

/* ─── Google Fonts ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* ═══ PRIMITIVE (theme-agnostic, raw scale) ═══ */
  --p-teal-300:#8FD6D8; --p-teal-400:#56BFC2; --p-teal-500:#359EA2; --p-teal-600:#1A7D82; --p-teal-050:#E1F5F6;
  --p-ocean-700:#174455; --p-ocean-800:#0C3240; --p-ocean-900:#08222B;
  --p-neutral-000:#FFFFFF; --p-neutral-050:#F5FCFC; --p-bg-light:#D8EFEE;
  --p-ink-900:#0D2228;
  --p-pos:#157055; --p-neg:#C04020; --p-warn:#A55800; --p-neg-vivid:#E0603C;

  /* ═══════════════════════════════════════════════════════════
     COLOR PALETTE — Biru Telur Asin (Duck Egg Blue)
     ═══════════════════════════════════════════════════════════ */

  /* ─── Background ────────────────────────────────────────── */
  --bg:          #D8EFEE;   /* Background utama halaman */
  --bg-2:        #DFF0F5;   /* Background alternatif (lebih terang) */

  /* ─── Surface / Card ────────────────────────────────────── */
  --card:        #FFFFFF;   /* Background card / surface utama */
  --card2:       #F5FCFC;   /* Background card sekunder / subtle */

  /* ─── Text / Ink ────────────────────────────────────────── */
  --ink:         #0D2228;   /* Teks utama — gelap cyan */
  --muted:       #4E6D74;   /* Teks sekunder — abu teal */
  --faint:       #4E7580;   /* Teks tersier — darkened for 4.5+ contrast on white */

  /* ─── Border / Divider ──────────────────────────────────── */
  --line:        #DDEEF0;   /* Border default */

  /* ─── Primary: Teal ─────────────────────────────────────── */
  --teal:        #56BFC2;   /* Primary brand color */
  --teal-d:      #359EA2;   /* Primary darker — hover state */
  --teal-deep:   #1A7D82;   /* Primary deepest — active/accent */
  --teal-soft:   #E1F5F6;   /* Primary background — badges, tags */

  /* ─── Dark Accent: Ocean ────────────────────────────────── */
  --ocean:       #0C3240;   /* Dark accent — sidebar, CTA buttons */
  --ocean2:      #174455;   /* Dark accent hover */

  /* ─── Semantic Colors ───────────────────────────────────── */
  --pos:         #157055;   /* Success / positive (6.03 contrast on white) */
  --neg:         #C04020;   /* Error / negative / danger (5.26 contrast on white) */
  --warn:        #A55800;   /* Warning (5.26 contrast on white) */
  --neg-vivid:   var(--p-neg-vivid);   /* dekoratif saja (grafik/animasi) — JANGAN untuk teks */

  /* ─── Semantic Backgrounds ──────────────────────────────── */
  --success-light: rgba(26, 144, 112, 0.10);
  --danger-light:  rgba(224, 96, 60, 0.10);
  --warning-light: rgba(217, 119, 6, 0.10);

  /* ─── Legacy Aliases (Backward Compatibility) ───────────── */
  --c1:          var(--teal);
  --c2:          var(--teal-d);
  --c3:          var(--teal-soft);
  --c4:          var(--teal-deep);
  --ink-2:       var(--muted);
  --ink-3:       var(--faint);
  --surface:     var(--card);
  --surface-2:   var(--card2);
  --glass-bg:    var(--card);
  --glass-border: var(--line);
  --success:     var(--pos);
  --danger:      var(--neg);
  --warning:     var(--warn);

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════ */
  --font-disp:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-display: var(--font-disp);   /* alias */

  /* ═══════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════ */
  --r:           22px;       /* Large — cards, modals */
  --r-md:        15px;       /* Medium — inner cards, tables */
  --r-sm:        10px;       /* Small — buttons, inputs */
  --r-pill:      999px;      /* Pill — badges, tags */

  /* Aliases */
  --radius:      var(--r);
  --radius-md:   var(--r-md);
  --radius-sm:   var(--r-sm);
  --radius-lg:   var(--r);
  --radius-pill: var(--r-pill);
  --radius-card: var(--r-md);   /* alias for home/peminjaman */

  /* ═══════════════════════════════════════════════════════════
     BOX SHADOWS
     ═══════════════════════════════════════════════════════════ */
  --sh:          0 1px 2px rgba(12,50,64,.04), 0 8px 24px rgba(12,50,64,.07);
  --sh-sm:       0 1px 3px rgba(12,50,64,.06);
  --sh-lg:       0 4px 6px rgba(12,50,64,.04), 0 20px 60px rgba(12,50,64,.12);
  --sh-md:       var(--sh);
  --sh-glow:     0 0 0 3px rgba(86,191,194,.18);  /* Focus glow */

  /* ═══════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════ */
  --sidebar-width: 220px;
  --rail-width:    72px;

  /* ═══════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════ */
  --z-atmos:     0;
  --z-base:      1;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;

  /* ═══════════════════════════════════════════════════════════
     ANIMATION
     ═══════════════════════════════════════════════════════════ */
  --dur-fast:    0.16s;
  --dur-base:    0.22s;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══════════════════════════════════════════════════════════
     BACKGROUND PATTERN — Dot Grid
     ═══════════════════════════════════════════════════════════ */
  /* v2: gradient mesh halus (gantikan dot-grid) */
  --bg-pattern:
    radial-gradient(1100px 760px at 0% -5%, rgba(86,191,194,.16), transparent 60%),
    radial-gradient(900px 720px at 100% 105%, rgba(12,50,64,.07), transparent 55%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  --bg-pattern-size: cover;

  /* ── v1.1 additions: complete alias coverage (anti-regression) ── */
  --bg-base:      var(--bg);
  --bg-card:      var(--card);    /* card background — used in promosi tabs */
  --bg-surface:   var(--card2);
  --bg-hover:     var(--bg-2);
  --bg-input:     var(--card);
  --border:       var(--line);
  --border-focus: var(--teal);
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --text-muted:     var(--faint);
  --on-c1:    var(--ink);
  --on-c2:    var(--ink);
  --on-c3:    #0D2228;
  --on-c4:    #FFFFFF;
  --on-ocean: #D4ECEF;
  --ring:     var(--teal);
  --amber:    var(--teal);
  --text-xs: 11px; --text-sm: 13px; --text-md: 14px; --text-base: 14px; --text-lg: 16px; --text-xl: 22px; --text-2xl: 26px;
  --radius-xl: 28px;
  --teal-tint-08: rgba(86,191,194,.08);
  --teal-tint-12: rgba(86,191,194,.12);
  --teal-tint-18: rgba(86,191,194,.18);

  /* ── v1.1 Sunset→Teal color aliases (promosi + shared-style coverage) ── */
  /* Teal tints (used where c1s/c2s/c3s/c4s appeared in old Sunset palette) */
  --c1s:         var(--teal-soft);     /* teal background tint */
  --c2s:         var(--teal-soft);     /* teal-d background tint */
  --c3s:         var(--teal-soft);     /* teal-soft tint */
  --c4s:         rgba(26,125,130,.15); /* teal-deep background tint */

  /* Blue aliases → map to teal (teal is the primary accent) */
  --blue:        var(--teal-deep);
  --blue-light:  var(--teal-soft);
  --blue-dim:    var(--teal-tint-18);

  /* Green aliases → map to success colors */
  --green:       var(--pos);
  --green-light: var(--success-light);
  --green-dim:   var(--success-light);

  /* Rose/Red aliases → map to danger colors */
  --rose:        var(--neg);
  --rose-light:  var(--danger-light);
  --rose-dim:    var(--danger-light);
  --red:         var(--neg);

  /* Amber aliases → map to warning colors */
  --amber-light: var(--teal-soft);
  --amber-dark:  var(--teal-deep);
  --amber-dim:   var(--teal-tint-18);

  /* Legacy Sunset effect vars (used in index.php) */
  --shadow:      12,50,64;  /* RGB triplet for rgba() usage in index.php */
  --glow:        1;          /* opacity multiplier for glow effects */
  --grain:       0;          /* film grain opacity — disabled in teal theme */
}


/* ═══ DARK THEME (disiapkan — inert sampai toggle dipasang di app) ═══
   Hanya me-remap token SEMANTIK. Komponen tak perlu tahu tema.        */
[data-theme="dark"] {
  --bg:#08222B; --bg-2:#0B2A34;
  --card:#0E2E38; --card2:#123741;
  --ink:#E9F6F6; --muted:#A6CAD1; --faint:#A3BAC2;
  --line:#1F424C;
  /* ── accent colors lightened so they tetap terbaca SEBAGAI TEKS di atas
        permukaan gelap (komponen yg memakainya sebagai FILL di-override
        di components.css agar teks putih tetap kontras). ── */
  --teal-deep:#6CD0D3;   /* was #1A7D82 */
  --teal-d:#56BFC2;      /* hover/secondary teal */
  --pos:#3FD99A;         /* success text */
  --neg:#FF8A66;         /* danger text */
  --warn:#F2B45E;        /* warning text */
  --teal-soft: rgba(86,191,194,.16);
  --ocean:#0A2A34; --ocean2:#14404C;
  --success-light: rgba(86,191,194,.14);
  --danger-light:  rgba(224,96,60,.18);
  --warning-light: rgba(165,88,0,.20);
  --sh:    0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.40);
  --sh-sm: 0 1px 3px rgba(0,0,0,.35);
  --sh-lg: 0 4px 6px rgba(0,0,0,.30), 0 20px 60px rgba(0,0,0,.50);
  --on-c1: var(--ink); --on-c2: var(--ink);
  --bg-pattern:
    radial-gradient(1100px 760px at 0% -5%, rgba(86,191,194,.10), transparent 60%),
    radial-gradient(900px 720px at 100% 105%, rgba(20,64,76,.45), transparent 55%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Material Symbols Rounded helper (restored — was dropped in v1.1 rewrite) */
.msr {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-size: inherit;
  vertical-align: middle;
}
.msr.fill { font-variation-settings: 'FILL' 1; }