/* ⚠️ MOBILE-FIRST: Base rules = mobile. Use @media(min-width: X) for desktop. Do NOT use @media(max-width) for layout.
   ==========================================
   CSS VARIABLES - Jalsam Design System
   ========================================== */

:root {
  /* Brand Colors */
  --bg-cream:    #F4F1EA; 
  --brand-navy:  #1D2D44; 
  --brand-navy-light: #324665;
  --brand-gold:  #AF905B; 
  --brand-gold-light: #CBAE7B;
  
  /* Text Colors */
  --text-main:   #1E293B; 
  --text-muted:  #64748B; 
  --card-bg:     #FFFFFF;
  --border-light:#E2E8F0; 
  
  /* Semantic Colors */
  --error-red:   #E63946;
  --success-green: #10B981;
  --accent-purple: #8B5CF6;

  /* Typography */
  --serif:       'Source Serif 4', georgia, serif;
  --sans:        'Inter', system-ui, sans-serif;
  
  /* Layout */
  --max:         1160px;
  --pad:         clamp(15px, 4vw, 80px); /* Tighter padding for mobile */
  
  /* Component Sizing */
  --topbar-height: 60px;
}