/* css/variables.css */
:root {
  /* Typography */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Base Colors - Light Theme (Default) */
  --bg-main: #F9F6F0;
  --bg-secondary: #eae7e0;
  --bg-card: #FFFFFF;
  
  --text-main: #1A4731;
  --text-muted: #3a6850;
  
  /* Brand Colors */
  --color-primary: #FFC107;
  --color-primary-hover: #E0A800;
  --color-primary-light: #ffce3a;
  --color-accent: #89CFF0;
  --color-success: #7BC043;
  
  /* Borders & Shadows */
  --border-color: #d8d5ce;
  --border-radius: 8px;
  --box-shadow: 0 4px 12px rgba(26, 71, 49, 0.08);
  --box-shadow-hover: 0 8px 24px rgba(26, 71, 49, 0.15);
  
  /* Layout */
  --header-height: 80px;
  --section-padding-x: 5%;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-main: #0B0C10;
  --bg-secondary: #0d1210;
  --bg-card: #122C1F;
  
  --text-main: #F9F6F0;
  --text-muted: #b8b5af;
  
  --color-primary: #FFC107;
  --color-primary-hover: #ffce3a;
  --color-accent: #89CFF0;
  --color-success: #7BC043;
  
  --border-color: #1e4531;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --box-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
}