:root {
  /* Primary Colors */
  --color-bg-primary:      #ffffff;
  --color-bg-secondary:    #f8fafc;
  --color-bg-tertiary:     #f1f5f9;
  
  /* Accent — Biru Tua */
  --color-accent:          #1e3a8a;
  --color-accent-hover:    #1e40af;
  --color-accent-muted:    #dbeafe;
  --color-accent-text:     #1e3a8a;
  
  /* Teks */
  --color-text-primary:    #0f172a;
  --color-text-secondary:  #475569;
  --color-text-muted:      #94a3b8;
  
  /* Semantic */
  --color-danger:          #ef4444;
  --color-danger-hover:    #dc2626;
  --color-warning:         #f59e0b;
  --color-border:          #e2e8f0;
  --color-border-hover:    #cbd5e1;

  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Noto Sans', sans-serif;
  --font-arabic: 'Amiri', serif;
  --font-ui: 'Inter', sans-serif;

  /* Base unit: 4px */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* Border radius */
  --radius-sm:  4px;    
  --radius-md:  8px;    
  --radius-lg:  12px;   
  --radius-xl:  16px;   
  --radius-full: 9999px; 
}

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.4;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--color-accent-hover);
}

html.dark {
  /* Primary Colors */
  --color-bg-primary:      #0f172a;
  --color-bg-secondary:    #1e293b;
  --color-bg-tertiary:     #334155;
  
  /* Accent — Biru Muda (terang untuk background gelap) */
  --color-accent:          #3b82f6;
  --color-accent-hover:    #60a5fa;
  --color-accent-muted:    #1e3a8a;
  --color-accent-text:     #bfdbfe;
  
  /* Teks */
  --color-text-primary:    #f8fafc;
  --color-text-secondary:  #cbd5e1;
  --color-text-muted:      #94a3b8;
  
  /* Semantic */
  --color-border:          #334155;
  --color-border-hover:    #475569;
}