/*
 * Garage - Theme Variables
 * Default theme using CSS Custom Properties
 */

:root {
    /* Font Stack */
    --font-stack: Roboto, sans-serif;
    
    /* Primary Colors */
    --color-primary: #ffd700;
    --color-primary-light: #fff9e6;
    --color-primary-dark: #f8d700;
    --color-primary-text: #333333;
    
    /* Link Colors */
    --color-link: #006bb7;
    --color-link-hover: #1b6ec2;

    /* Background Colors */
    --color-background: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-alt: #fafafa;
    --color-surface-hover: #f0f0f0;

    /* Text Colors */
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-light: #cccccc;
    --color-text-inverse: #ffffff;

    /* Border Colors */
    --color-border: #dddddd;
    --color-border-light: #eeeeee;
    --color-border-dark: #555555;

    /* Navigation Colors */
    --nav-background: #1a1a1a;
    --nav-background-hover: #2a2a2a;
    --nav-text: var(--color-primary);
    --nav-text-active: var(--color-primary);

    /* Sub-header Colors */
    --subheader-background: #1a1a1a;
    --subheader-text: var(--color-primary);

    /* Button Colors */
    --button-background: #1a1a1a;
    --button-background-hover: #2a2a2a;
    --button-background-active: var(--color-primary);
    --button-text: #ffffff;
    --button-text-active: #333333;
    --button-border: #555555;
    --button-border-active: var(--color-primary);

    /* Landing Page */
    --landing-gradient-start: #667eea;
    --landing-gradient-end: #764ba2;

    /* Appointment Type Colors */
    --appointment-blue-bg: #a8d5f7;
    --appointment-blue-border: #5eb3e8;

    --appointment-green-bg: #b8e994;
    --appointment-green-border: #78c850;

    --appointment-yellow-bg: #fff9a8;
    --appointment-yellow-border: #f8d700;

    --appointment-orange-bg: #ffcc9a;
    --appointment-orange-border: #ff9f4a;

    /* Shadows */
    --shadow-sm: 0 0px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 0px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 0px 15px rgba(0, 0, 0, 0.15);

    /* Error UI */
    --error-background: #b32121;
    --error-background-light: lightyellow;
    --error-text: #ffffff;

    /* Validation Colors */
    --validation-success: #26b050;
    --validation-error: #e50000;

    /* Spacing (optional - for future use) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
}