@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Pantone Colors */
    --color-primary: #BA3A32;       /* Pantone Red */
    --color-primary-rgb: 186, 58, 50;
    --color-secondary: #61CE70;     /* Pantone Green */
    --color-secondary-rgb: 97, 206, 112;
    
    /* Nature-Inspired Dark/Light Theme */
    --bg-main: #faf9f6;             /* Warm cream background */
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f4f5f2;  /* Soft sage/cream elevated */
    --text-main: #2d3732;           /* Deep dark slate green */
    --text-muted: #5e6b64;          /* Soft slate green */
    --border-color: rgba(97, 206, 112, 0.15);
    --border-glow: rgba(186, 58, 50, 0.1);
    --shadow-main: 0 10px 30px -10px rgba(45, 55, 50, 0.08);
    --shadow-hover: 0 20px 40px -15px rgba(45, 55, 50, 0.15);
    
    --font-sans: 'Inter', sans-serif;
    --font-title: 'Outfit', sans-serif;
    
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-full: 9999px;
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Overrides */
[data-theme="dark"] {
    --bg-main: #0d1310;             /* Forest dark background */
    --bg-surface: #141c18;          /* Slate dark surface */
    --bg-surface-elevated: #1a2520; /* Elevated surface */
    --text-main: #f0f4f2;           /* Light text */
    --text-muted: #9bb0a4;          /* Muted text */
    --border-color: rgba(97, 206, 112, 0.12);
    --border-glow: rgba(186, 58, 50, 0.2);
    --shadow-main: 0 10px 40px -15px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
}