/* Color and spacing variables */
:root {
    /* Primary Colors */
    --primary-blue: #3498db;
    --primary-blue-dark: #2980b9;
    --primary-dark: #2c3e50;
    --secondary-dark: #34495e;

    /* Neutral Colors */
    --white: #ffffff;
    --off-white: #fafafa;
    --light-gray: #f5f5f5;
    --border-light: #ecf0f1;
    --border-default: #ddd;
    --border-medium: #aaa;
    --text-dark: #2c3e50;
    --text-muted: #7f8c8d;
    --text-light: #555;

    /* Accent Colors */
    --success: #27ae60;
    --success-hover: #229954;
    --secondary-button: #95a5a6;
    --secondary-button-hover: #7f8c8d;

    /* Spacing */
    --spacing-xs: 3px;
    --spacing-sm: 5px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-2xl: 15px;
    --spacing-3xl: 20px;
    --spacing-4xl: 30px;

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

    /* Fonts */
    --font-family: "Atkinson Hyperlegible", sans-serif;
    --font-mono: "Courier New", monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.8rem;
    --text-base: 0.85rem;
    --text-md: 0.9rem;
    --text-lg: 0.95rem;
    --text-xl: 1rem;
    --text-2xl: 1.5rem;

    /* Z-index */
    --z-dropdown: 1000;
}