/* ============================================
   CSS VARIABLES - DESIGN SYSTEM
   ============================================ */

:root {
  /* === COLORS === */
  
  /* Backgrounds */
  --color-cream: #FAF8F3;
  --color-warm-white: #FFFDF7;
  --color-off-white: #F5F3EE;
  
  /* Primary Colors */
  --color-terracotta: #D4735E;
  --color-burnt-orange: #E8956B;
  --color-sage: #8B9D83;
  --color-olive: #6B7A5F;
  --color-charcoal: #2C2C2C;
  
  /* Status Colors */
  --color-status-green: #8B9D83;
  --color-status-yellow: #E8956B;
  --color-status-red: #C85C54;
  
  /* Status Backgrounds (15% opacity) */
  --color-status-green-bg: rgba(139, 157, 131, 0.15);
  --color-status-yellow-bg: rgba(232, 149, 107, 0.15);
  --color-status-red-bg: rgba(200, 92, 84, 0.15);
  
  /* Shadows & Borders */
  --shadow-soft: rgba(212, 115, 94, 0.12);
  --shadow-medium: rgba(44, 44, 44, 0.15);
  --shadow-heavy: rgba(44, 44, 44, 0.3);
  --border-color: rgba(44, 44, 44, 0.08);
  --border-color-medium: rgba(44, 44, 44, 0.15);
  
  /* === TYPOGRAPHY === */
  
  /* Font Families */
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.85rem;      /* 13.6px */
  --text-base: 0.95rem;    /* 15.2px */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.1rem;       /* 17.6px */
  --text-xl: 1.3rem;       /* 20.8px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.8rem;      /* 28.8px */
  --text-4xl: 2.2rem;      /* 35.2px */
  --text-5xl: 2.8rem;      /* 44.8px */
  
  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;
  
  /* === SPACING === */
  
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 0.75rem;     /* 12px */
  --space-base: 1rem;      /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --space-2xl: 2.5rem;     /* 40px */
  --space-3xl: 3rem;       /* 48px */
  --space-4xl: 4rem;       /* 64px */
  --space-5xl: 6rem;       /* 96px */
  
  /* === LAYOUT === */
  
  --container-max-width: 1200px;
  --container-padding: 2rem;
  --container-padding-mobile: 1rem;
  
  --header-height: 88px;
  --bottom-nav-height: 64px;
  
  /* === BORDER RADIUS === */
  
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* === TRANSITIONS === */
  
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-medium: 300ms ease;
  --transition-slow: 400ms ease;
  
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  
  /* === Z-INDEX === */
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* === DARK MODE === */
:root[data-theme="dark"] {
  --color-cream: #171310;
  --color-warm-white: #251f1b;
  --color-off-white: #201a16;

  --color-terracotta: #e08b75;
  --color-burnt-orange: #f0a47c;
  --color-sage: #9fae95;
  --color-olive: #b3aa97;
  --color-charcoal: #f5efe6;

  --color-status-green: #9fae95;
  --color-status-yellow: #f0a47c;
  --color-status-red: #e07164;

  --color-status-green-bg: rgba(159, 174, 149, 0.18);
  --color-status-yellow-bg: rgba(240, 164, 124, 0.18);
  --color-status-red-bg: rgba(224, 113, 100, 0.2);

  --shadow-soft: rgba(0, 0, 0, 0.35);
  --shadow-medium: rgba(0, 0, 0, 0.45);
  --shadow-heavy: rgba(0, 0, 0, 0.6);
  --border-color: rgba(245, 239, 230, 0.08);
  --border-color-medium: rgba(245, 239, 230, 0.16);
}