/*
 * CSS Variables - Design System
 * Mobile-first design tokens
 */

:root {
    /* Colors - Primary */
    --color-primary: #1f7a5a;
    --color-primary-dark: #166148;
    --color-primary-light: #4ecdc4;

    /* Colors - Neutral */
    --color-dark: #0f172a;
    --color-dark-light: #1e293b;
    --color-gray-900: #333;
    --color-gray-700: #555;
    --color-gray-500: #666;
    --color-gray-400: #999;
    --color-gray-300: #cbd5e1;
    --color-gray-200: #e0e0e0;
    --color-gray-100: #eee;
    --color-gray-50: #f8f9fa;
    --color-white: #ffffff;

    /* Colors - Semantic */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    /* Typography - Base (Mobile First) */
    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Typography - Scale (Mobile) */
    --font-size-xs: 13px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 36px;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing - Mobile First */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Layout */
    --container-max-width: 1200px;
    --navbar-height: 70px;
}

/* Tablet Breakpoint */
@media (min-width: 768px) {
    :root {
        --font-size-xs: 14px;
        --font-size-sm: 15px;
        --font-size-md: 17px;
        --font-size-lg: 19px;
        --font-size-xl: 22px;
        --font-size-2xl: 26px;
        --font-size-3xl: 32px;
        --font-size-4xl: 38px;
        --font-size-5xl: 44px;
    }
}

/* Desktop Breakpoint */
@media (min-width: 1024px) {
    :root {
        --font-size-xs: 14px;
        --font-size-sm: 16px;
        --font-size-md: 18px;
        --font-size-lg: 20px;
        --font-size-xl: 24px;
        --font-size-2xl: 28px;
        --font-size-3xl: 36px;
        --font-size-4xl: 42px;
        --font-size-5xl: 48px;
    }
}