/* variables.css */

/* Color Variables */
:root {
    --color-primary: #1A1A2E;
    --color-secondary: #00BFFF;
    --color-accent: #1B204C;
    --color-highlight: #FF5733;
    --color-background: #F5F5F5;
    --color-border: #D3D3D3;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-light: #FFFFFF;
    --gradient-primary: linear-gradient(135deg, #1A1A2E 0%, #00BFFF 100%);
    --gradient-secondary: linear-gradient(135deg, #00BFFF 0%, #1B204C 100%);
}

/* Font Variables */
:root {
    --font-family-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-family-serif: 'Georgia', serif;
    --font-family-futuristic: 'Orbitron', sans-serif; /* Adding futuristic font */
    --font-size-base: 16px;
    --font-size-h1: 2.5em;
    --font-size-h2: 2em;
    --font-size-h3: 1.75em;
    --font-size-h4: 1.5em;
    --font-size-h5: 1.25em;
    --font-size-h6: 1em;
    --line-height-base: 1.5;
}

/* Spacing Variables */
:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;
}

/* Border Radius Variables */
:root {
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
}

/* Shadow Variables */
:root {
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Transition Variables */
:root {
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.4s ease-in-out;
    --transition-slow: 0.6s ease-in-out;
}