/* === caseDB DESIGN SYSTEM VARIABLES === */
:root {
    /* 1. COLORS */
    /* Neutrals */
    --color-bg-white: #FFFFFF;
    --color-bg-grey: #F8FAFC;
    --color-bg-dark: #0F172A;

    --color-text-main: #0F172A;
    --color-text-sub: #3F4F5E;
    --color-text-light: #94A3B8;
    --color-border: #E2E8F0;
    --color-sub-text: #3F4F5E;

    /* Themes (Can be overridden by body classes) */
    --color-primary: #0EA5E9;
    /* Default Sky */
    --color-accent: #10B981;
    /* Default Green */
    --color-warning: #F59E0B;
    /* Construction Orange */

    /* 2. TYPOGRAPHY */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* 3. SPACING SCALE */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 60px;
    --space-4xl: 80px;
    --space-5xl: 100px;

    /* 4. TYPOGRAPHY SCALE */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 36px;
    --text-5xl: 42px;

    /* 5. BORDER & RADIUS */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* 6. SHADOWS */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    --shadow-hover: 0 20px 30px -5px rgba(0, 0, 0, 0.06);
    --shadow-strong: 0 20px 40px -10px rgba(0, 0, 0, 0.1);

    /* 7. ADDITIONAL COLORS */
    --color-bg-light: #F1F5F9;
    --color-border-light: #F1F5F9;

    /* 8. LAYOUT */
    --container-width: 1240px;
    --section-padding: 100px 20px;
}