/* =====================================================================
   SI-LT2 PAMARICAN — DESIGN TOKENS v2
   ===================================================================== */

:root{
  /* ── Identitas Mobile: Lencana & Sangga ───────────────────────────── */
  --pm-brown-dark:  #2D2015;
  --pm-brown:       #6B4A32;
  --pm-brown-soft:  #8A6647;
  --pm-maroon:      #7A2039;
  --pm-maroon-soft: #9C3350;
  --pm-maroon-dark: #5E1229;
  --pm-forest:      #3F5A3C;
  --pm-forest-soft: #4F7049;
  --pm-gold:        #C9982F;
  --pm-gold-soft:   #E8C877;
  --pm-gold-dark:   #A07820;
  --pm-paper:       #FAF6ED;
  --pm-paper-dim:   #F1EADA;
  --pm-paper-deep:  #E8DFC8;
  --pm-ink:         #2B2118;
  --pm-ink-soft:    #6B5D4F;
  --pm-ink-faint:   #9C8C80;
  --pm-text:        #2B2118;
  --pm-muted:       #6B5D4F;
  --pm-border:      #E4DCC9;

  /* ── Identitas Admin: Liquid Glass ───────────────────────────────── */
  --gl-bg-deep:      #0A1918;
  --gl-bg-teal:      #0F3028;
  --gl-bg-indigo:    #1E1F4A;
  --gl-glow-amber:   #F3A968;
  --gl-glass-fill:        rgba(255,255,255,0.10);
  --gl-glass-fill-strong: rgba(255,255,255,0.88);
  --gl-glass-fill-soft:   rgba(255,255,255,0.58);
  --gl-glass-border:      rgba(255,255,255,0.35);
  --gl-glass-border-dim:  rgba(255,255,255,0.14);
  --gl-text-onlight:       #18211F;
  --gl-text-onlight-muted: #516360;
  --gl-text-ondark:        #F3F1EA;
  --gl-text-ondark-muted:  #B2BDB9;
  --gl-accent-gold:   #D9A441;
  --gl-accent-gold-soft: #EECB7A;
  --gl-success:  #3FA972;
  --gl-warning:  #E8A33D;
  --gl-danger:   #E15D5D;
  --gl-info:     #4F9DE8;

  /* ── Admin layout alias (pakai di kelola-sanggahan, simulasi, dll.) ─ */
  --glass-bg:     var(--gl-glass-fill-soft);
  --glass-border: var(--gl-glass-border);
  --text-muted:   var(--gl-text-onlight-muted);

  /* ── Tipografi ─────────────────────────────────────────────────────── */
  --font-display:       'Outfit', 'Poppins', sans-serif;
  --font-body-mobile:   'Inter', 'Plus Jakarta Sans', sans-serif;
  --font-admin-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-admin-body:    'Inter', sans-serif;

  /* ── Font-size scale ───────────────────────────────────────────────── */
  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   15.5px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Shadow ────────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 4px rgba(43,33,24,0.08);
  --shadow-soft: 0 4px 20px rgba(43,33,24,0.09);
  --shadow-card: 0 8px 30px rgba(20,20,30,0.10);
  --shadow-lift: 0 16px 40px rgba(20,20,30,0.16);
  --shadow-glass:0 8px 32px rgba(4,16,14,0.32);

  /* ── Transition presets ────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(0,0,.3,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    350ms;

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Gradient presets ──────────────────────────────────────────────── */
  --grad-gold:   linear-gradient(135deg,#F3D27A,var(--gl-accent-gold));
  --grad-maroon: linear-gradient(135deg,var(--pm-maroon),var(--pm-maroon-dark));
  --grad-forest: linear-gradient(135deg,var(--pm-forest),var(--pm-forest-soft));
  --grad-glass:  linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
}

@media (prefers-color-scheme: dark){
  :root{
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.30);
    --shadow-card: 0 8px 30px rgba(0,0,0,0.28);
  }
}