/* ============================================
   VARIABLES DE CONFIGURATION - LEVELS AUTOMOBILE
   ============================================

   Modifiez ces variables pour personnaliser
   l'apparence de l'application.
   ============================================ */

:root {
    /* ========== COULEURS ========== */

    /* Couleur principale (doré) */
    --color-primary: rgb(206, 189, 132);
    --color-primary-light: rgba(206, 189, 132, 0.3);
    --color-primary-dark: rgba(206, 189, 132, 0.5);

    /* Couleurs de fond */
    --color-background: #000000;
    --color-background-card: #000000;

    /* Couleurs de texte */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-tertiary: rgba(255, 255, 255, 0.6);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-text-dim: rgba(255, 255, 255, 0.4);

    /* Couleur d'erreur */
    --color-error: #ef4444;
    --color-error-bg: rgba(255, 0, 0, 0.1);

    /* ========== TAILLES ========== */

    /* Header */
    --header-height: 100px;
    --header-height-mobile: 120px;
    --header-padding: 20px 40px;
    --header-padding-mobile: 15px 20px;

    /* Logo */
    --logo-width: 120px;
    --logo-width-mobile: 100px;

    /* ========== TYPOGRAPHIE ========== */

    /* Polices */
    --font-family-primary: 'Bai Jamjuree', sans-serif;
    --font-family-secondary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Tailles de police - Header/Météo */
    --font-size-time: 1.8em;
    --font-size-time-mobile: 1.3em;
    --font-size-temperature: 1.8em;
    --font-size-temperature-mobile: 1.3em;
    --font-size-condition: 1.6em;
    --font-size-condition-mobile: 1.2em;
    --font-size-separator: 1.5em;
    --font-size-separator-mobile: 1.2em;

    /* Tailles de police - Titres */
    --font-size-title-main: 1.8em;
    --font-size-title-main-mobile: 1.3em;
    --font-size-subtitle: 0.75em;

    /* Tailles de police - Arrivages */
    --font-size-arrivals-title: 1.8em;
    --font-size-arrivals-title-mobile: 1.3em;
    --font-size-vehicle-main: 1.8em;
    --font-size-vehicle-main-mobile: 1.3em;
    --font-size-vehicle-specs: 0.85em;
    --font-size-info-label: 0.85em;
    --font-size-info-value: 1.1em;
    --font-size-info-value-mobile: 1em;
    --font-size-price: 1.3em;
    --font-size-price-mobile: 1.2em;

    /* Tailles de police - QR Code */
    --font-size-qr-title: 2.5em;
    --font-size-qr-subtitle: 1.5em;
    --font-size-qr-url: 1.8em;

    /* Espacement des lettres */
    --letter-spacing-tight: 0.5px;
    --letter-spacing-normal: 1px;
    --letter-spacing-medium: 1.5px;
    --letter-spacing-wide: 2px;
    --letter-spacing-wider: 3px;
    --letter-spacing-widest: 4px;

    /* ========== ESPACEMENTS ========== */

    /* Padding des cartes */
    --card-padding: 30px 60px;
    --card-padding-mobile: 30px 20px;

    /* Padding du titre arrivages */
    --arrivals-title-padding: 60px 20px 40px;
    --arrivals-title-padding-mobile: 30px 20px 20px;

    /* Gap entre éléments */
    --gap-weather: 15px;
    --gap-weather-mobile: 10px;
    --gap-header-mobile: 15px;

    /* ========== BORDURES ========== */

    /* Couleurs de bordure */
    --border-color-primary: rgba(206, 189, 132, 0.3);
    --border-color-secondary: rgba(206, 189, 132, 0.25);
    --border-color-card: rgba(206, 189, 132, 0.2);

    /* Épaisseur de bordure */
    --border-width: 1px;
    --border-width-thick: 3px;

    /* Rayon de bordure */
    --border-radius: 20px;

    /* ========== ANIMATIONS ========== */

    /* Durées */
    --animation-duration-fast: 0.3s;
    --animation-duration-normal: 0.5s;
    --animation-duration-slow: 1s;

    /* Délais */
    --animation-delay-logo: 0.3s;

    /* ========== OMBRES ========== */

    /* Ombres de cartes */
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-qr: 0 0 40px rgba(206, 189, 132, 0.3);
    --shadow-qr-glow: 0 0 60px rgba(206, 189, 132, 0.6);

    /* ========== Z-INDEX ========== */

    --z-index-background: 0;
    --z-index-content: 1;
    --z-index-video: 500;
    --z-index-header: 1000;
    --z-index-qr: 2000;

    /* ========== SCROLLBAR ========== */

    --scrollbar-width: 8px;
    --scrollbar-thumb-color: rgba(206, 189, 132, 0.3);
    --scrollbar-thumb-hover-color: rgb(206, 189, 132);
}