/* ============================================
   NANO TV PARIS — Variables CSS
   Modifier ces variables pour changer tout le site
   ============================================ */

:root {
    /* --- Couleurs principales (bleu) --- */
    --color-primary: #4399db;           /* Bleu principal */
    --color-primary-dim: #4da4e7;       /* Bleu clair */
    --color-primary-container: #002a42; /* Fond sombre bleu */
    --color-on-primary: #003354;        /* Texte sur bleu */
    --color-on-primary-container: #0081a1;

    /* --- Couleurs secondaires (bleu marine) --- */
    --color-secondary: #8badd4;         /* Bleu marine clair */
    --color-secondary-container: #1a2744; /* Bleu marine profond */
    --color-on-secondary: #e5eaf2;
    --color-on-secondary-container: #9fb7d6;

    /* --- Couleurs tertiaires (jaune poussin clair) --- */
    --color-tertiary: #f0d850;
    --color-tertiary-container: #3a3400;
    --color-on-tertiary: #2a2500;

    /* --- Surfaces (noirs et gris) --- */
    --color-background: #131313;        /* Fond principal noir */
    --color-surface: #131313;
    --color-surface-dim: #131313;
    --color-surface-container-lowest: #0e0e0e;
    --color-surface-container-low: #1c1b1b;
    --color-surface-container: #201f1f;
    --color-surface-container-high: #2a2a2a;
    --color-surface-container-highest: #353534;
    --color-surface-variant: #353534;
    --color-surface-bright: #3a3939;

    /* --- Textes --- */
    --color-on-surface: #e5e2e1;        /* Texte blanc cassé */
    --color-on-surface-variant: #c3c6ce; /* Texte gris clair */
    --color-on-background: #e5e2e1;

    /* --- Bordures et contours --- */
    --color-outline: #8d9198;
    --color-outline-variant: #43474d;

    /* --- Erreurs --- */
    --color-error: #ffb4ab;
    --color-error-container: #93000a;
    --color-on-error: #690005;

    /* --- Inversés --- */
    --color-inverse-surface: #e5e2e1;
    --color-inverse-on-surface: #313030;
    --color-inverse-primary: #1a6fa0;

    /* --- Typographie --- */
    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-label: 'Inter', sans-serif;

    /* --- Tailles de police --- */
    --text-xs: 0.625rem;    /* 10px */
    --text-sm: 0.75rem;     /* 12px */
    --text-base: 0.875rem;  /* 14px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.75rem;    /* 60px */
    --text-7xl: 4.5rem;     /* 72px */
    --text-8xl: 6rem;       /* 96px */

    /* --- Espacements --- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;

    /* --- Bordures --- */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    /* --- Nav --- */
    --nav-bg: rgba(19, 19, 19, 0.6);

    /* --- Ombres --- */
    --shadow-nav: 0 20px 50px rgba(0, 0, 0, 0.5);

    /* --- Transitions --- */
    --transition-fast: 200ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-slower: 700ms ease;

    /* --- Layout --- */
    --max-width: 80rem;     /* 1280px */
    --nav-height: 5rem;     /* 80px */
}