:root {
  /* ============================================
     BRAND CORE COLORS
     ============================================ */
  --color-brand-black: #0B0B0B;
  --color-white: #FFFFFF;

  /* ============================================
     WARM NEUTRAL PALETTE
     ============================================ */
  --color-bg-main: #FAF8F5;      /* Warm Ivory - Main background */
  --color-bg-soft: #F2EFEA;      /* Soft Paper - Section backgrounds */
  --color-bg-card: #FFFFFF;      /* Card backgrounds */
  
  --color-text-primary: #2A2A2A; /* Ink Gray - Body text */
  --color-text-secondary: #5A5A5A; /* Medium gray - Secondary text */
  --color-text-muted: #8E8E8E;   /* Ash Gray - Muted/placeholder text */
  
  --color-border: #D8D3CB;       /* Warm Stone - Borders & dividers */
  --color-border-light: #E8E4DD; /* Lighter border variant */

  /* ============================================
     ACCENT COLORS (Warm Cedar)
     ============================================ */
  --color-accent: #8B6A4F;       /* Primary accent - CTAs, highlights */
  --color-accent-hover: #7A5C44; /* Hover state */
  --color-accent-soft: #C7B09A;  /* Soft variant - backgrounds, subtle accents */
  --color-accent-lighter: #E8DFD4; /* Very light accent for backgrounds */

  /* ============================================
     SEMANTIC COLORS (Low Saturation)
     ============================================ */
  --color-success: #6F8F7B;      /* Soft sage green */
  --color-success-soft: #E8F0EB; /* Success background */
  --color-success-text: #4A6B54; /* Success text (darker) */
  
  --color-warning: #C2A14D;      /* Muted gold */
  --color-warning-soft: #F9F4E6; /* Warning background */
  --color-warning-text: #8B7235; /* Warning text (darker) */
  
  --color-error: #A14A3B;        /* Deep brick red */
  --color-error-soft: #F8ECEB;   /* Error background */
  --color-error-text: #7D3A2E;   /* Error text (darker) */
  
  --color-info: #6B7C8F;         /* Dusty blue-gray */
  --color-info-soft: #EEF1F4;    /* Info background */
  --color-info-text: #4A5666;    /* Info text (darker) */

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  
  /* Type Scale */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 0.9375rem;  /* 15px - Base body */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.5rem;       /* 24px - H3 */
  --text-2xl: 2rem;        /* 32px - H2 */
  --text-3xl: 2.5rem;      /* 40px - H1 */
  --text-4xl: 3rem;        /* 48px - Display */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  
  /* Letter Spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.0125em; /* +0.2px at 16px */

  /* ============================================
     SPACING (8px Grid)
     ============================================ */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS (Subtle Only)
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(11, 11, 11, 0.03);
  --shadow-sm: 0 1px 3px rgba(11, 11, 11, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 11, 11, 0.06);
  --shadow-lg: 0 8px 24px rgba(11, 11, 11, 0.08);
  
  /* Card-specific shadow */
  --shadow-card: 0 2px 8px rgba(11, 11, 11, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(11, 11, 11, 0.08);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* ============================================
   DARK MODE SUPPORT (Optional - Reserved)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Reserved for future dark mode implementation */
    /* Brand should remain warm even in dark mode */
  }
}