/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
    /* REPLIT LIGHT THEME COLORS */
    --color-bg-primary: hsl(44 24% 94%);
    --color-bg-secondary: #dfe6d5;
    --color-surface: hsl(42 29% 97%);
    --color-bg-surface: hsl(42 29% 97%);
    --color-bg-surface-hover: hsl(42 15% 88%);
    --color-surface-dark: #14211f;
    --color-elevated: hsl(42 29% 97%);
    
    --color-text-primary: hsl(170 26% 13%);
    --color-text-secondary: hsl(170 11% 39%);
    --color-text-inverse: #f6f2e9;
    --color-text-light: #f6f2e9;
    
    --color-muted: hsl(42 15% 88%);
    --color-muted-light: rgba(246, 242, 233, 0.62);
    
    --color-accent-primary: hsl(94 35% 69%);
    --color-accent-secondary: hsl(43 51% 67%);
    --color-accent-hover: hsl(94 40% 64%);
    
    --color-border: hsl(170 12% 79%);
    --color-border-dark: rgba(246, 242, 233, 0.19);
    
    --color-success: #dcebd2;
    --color-error: #f3d5cc;
    --color-danger: hsl(6 66% 46%);
    
    --color-primary: hsl(158 38% 30%);
    --color-ring: hsl(158 38% 39%);
    --color-focus: rgba(30, 93, 76, 0.5);

    /* REPLIT FONTS */
    --font-sans: "DM Sans", ui-sans-serif, sans-serif;
    --font-mono: "Space Grotesk", ui-monospace, monospace;
    
    /* EXISTING FONTS */
    --font-primary: var(--font-sans);
    --font-secondary: var(--font-sans);

    /* TYPOGRAPHY */
    --font-size-h1: clamp(2.5rem, 5vw + 1rem, 4.6rem);
    --font-size-h2: clamp(2.2rem, 5vw, 4.6rem);
    --font-size-h3: clamp(1.5rem, 2vw + 1rem, 2.25rem);
    --font-size-h4: clamp(1.25rem, 2vw, 1.5rem);
    --font-size-body: 1rem;
    --font-size-sm: 0.875rem;
    
    /* REPLIT RADIUS & SHADOWS */
    --radius: 0.75rem;
    --shadow-lg: 0 24px 70px rgba(20, 33, 31, 0.12);

    /* EXISTING SPACING & LAYOUT */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-6: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-12: 6rem;    /* 96px */
    --space-16: 8rem;    /* 128px */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1240px;
    
    /* EXISTING BORDERS & SHADOWS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px rgba(20, 33, 31, 0.05);
    --shadow-md: 0 4px 6px rgba(20, 33, 31, 0.08);
    --shadow-glow: 0 0 20px rgba(30, 93, 76, 0.15);

    /* EXISTING TRANSITIONS */
    --transition-fast: 150ms ease-out;
    --transition-normal: 300ms ease-out;
    --transition-slow: 500ms ease-out;

    /* EXISTING Z-INDEX */
    --z-negative: -1;
    --z-normal: 1;
    --z-dropdown: 40;
    --z-sticky: 50;
    --z-mobile-nav: 55;
    --z-modal: 60;
}