/* ============================================
   Jalur Samping — Design Tokens (CSS Variables)
   Neobrutalism Design System
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --bg-cream:          #F4F1EA;
  --brand-navy:        #1D2D44;
  --brand-navy-light:  #324665;
  --brand-navy-dark:   #14203A;
  --brand-gold:        #AF905B;
  --brand-gold-light:  #CBAE7B;
  --brand-gold-pale:   #F5EDE0;

  /* ---- Text ---- */
  --text-main:   #1E293B;
  --text-muted:  #64748B;

  /* ---- Surfaces ---- */
  --card-bg:      #FFFFFF;
  --border-light: #E2E8F0;
  --surface-warm: #FBF8F3;

  /* ---- Semantic Colors ---- */
  --error-red:        #DC2626;
  --error-red-light:  #FEE2E2;
  --success-green:    #16A34A;
  --success-green-light: #DCFCE7;
  --info-blue:        #2563EB;
  --info-blue-light:  #DBEAFE;
  --warn-amber:       #D97706;
  --warn-amber-light: #FEF3C7;
  --purple:           #7C3AED;
  --purple-light:     #EDE9FE;

  /* ---- Typography ---- */
  --serif: 'Source Serif 4', 'Georgia', serif;
  --sans:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ---- Font Sizes (fluid) ---- */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-hero: clamp(2rem, 5vw, 3.5rem);

  /* ---- Font Weights ---- */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Line Heights ---- */
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* ---- Layout ---- */
  --max:          1160px;
  --max-article:  900px;
  --pad:          clamp(15px, 4vw, 80px);

  /* ---- Spacing Scale ---- */
  --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;
  --sp-20: 5rem;

  /* ---- Border Radius ---- */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   14px;
  --r-pill: 50px;

  /* ---- Neobrutalism Shadows ---- */
  --shadow-sm:     3px 3px 0 var(--brand-navy);
  --shadow-md:     4px 4px 0 var(--brand-navy);
  --shadow-lg:     6px 6px 0 var(--brand-navy);
  --shadow-hover:  6px 6px 0 var(--brand-navy);
  --shadow-none:   0 0 0 var(--brand-navy);

  /* ---- Borders ---- */
  --border-card:   2px solid var(--brand-navy);
  --border-accent: 2px solid var(--brand-gold);
  --border-soft:   1px solid var(--border-light);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  250ms;

  /* ---- Z-Index Scale ---- */
  --z-base:    1;
  --z-dropdown: 10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}