/**
 * THÈME DEFAULT - Le Fondement Universel
 *
 * Ce thème représente l'équilibre parfait entre modernité et accessibilité.
 * Il utilise des polices système natives pour des performances optimales
 * et une familiarité immédiate pour chaque utilisateur.
 *
 * Philosophie typographique:
 * Le stack System UI garantit que le site utilise toujours San Francisco
 * sur macOS/iOS, Segoe UI sur Windows, et Roboto sur Android, offrant
 * une expérience native optimisée pour chaque plateforme.
 *
 * Philosophie colorimétrique:
 * Les couleurs OKLCH sont calibrées pour maximiser l'accessibilité avec
 * des ratios de contraste WCAG AAA tout en maintenant une esthétique
 * moderne et professionnelle. La palette bleue est universelle et
 * évoque la technologie, la confiance et le professionnalisme.
 */

:root {
    /* ========================================
     *      POLICES - SYSTEM UI NATIVE
     *      ======================================== */

    /**
     * Police de corps: System UI
     *
     * Cette déclaration unique utilise automatiquement la police d'interface
     * native du système d'exploitation. Sur macOS récent, c'est San Francisco,
     * une police variable avec d'excellentes métriques. Sur Windows onze,
     * c'est Segoe UI Variable. Sur Android, c'est Roboto ou Roboto Flex.
     *
     * Avantages:
     * - Aucun téléchargement de police nécessaire (performances maximales)
     * - Apparence native et familière pour chaque utilisateur
     * - Optimisation automatique pour l'écran spécifique
     * - Support des features OpenType avancées sur systèmes modernes
     */
    --font-body: system-ui, sans-serif;

    /**
     * Police de titres: System UI (même que le corps)
     *
     * Pour le thème Default, nous utilisons la même police pour le corps
     * et les titres, créant une unité typographique complète. La hiérarchie
     * est créée uniquement par les variations de taille et de poids.
     */
    --font-heading: system-ui, sans-serif;

    /**
     * Police monospace: UI Monospace
     *
     * Similaire à system-ui mais pour les polices à chasse fixe. Utilise
     * SF Mono sur macOS, Cascadia Code sur Windows onze, et les meilleures
     * polices monospace disponibles sur chaque système.
     */
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

    /* ========================================
     *      COULEURS PRIMAIRES - BLEU MODERNE
     *      ======================================== */

    /**
     * Couleur primaire: Bleu moderne équilibré
     *
     * OKLCH: 55% luminosité, 0.19 chroma, 250° teinte
     *
     * Explication des composantes:
     * - Luminosité 55%: Suffisamment sombre pour un bon contraste sur blanc
     *   tout en restant vibrant. Cette valeur garantit un ratio de contraste
     *   supérieur à quatre point cinq sur un par un avec du blanc, respectant
     *   WCAG AA pour le texte normal.
     *
     * - Chroma 0.19: Saturation modérée-élevée qui rend la couleur vive et
     *   moderne sans être agressive ou fatiguante pour les yeux. Cette valeur
     *   se situe dans la zone optimale pour les couleurs d'interface.
     *
     * - Teinte 250°: Un bleu légèrement violet qui évoque la technologie
     *   moderne. Cette teinte spécifique est plus riche et sophistiquée
     *   qu'un bleu pur à deux cent quarante degrés.
     */
    --color-primary: oklch(55% 0.19 250);

    /**
     * Variation claire: +15% luminosité
     *
     * Pour créer une variation perceptuellement cohérente, nous augmentons
     * uniquement la luminosité. Le chroma et la teinte restent identiques,
     * garantissant que la couleur plus claire est clairement la même couleur,
     * juste plus lumineuse. Ceci est utilisé pour les états hover et les
     * arrière-plans colorés légers.
     */
    --color-primary-light: oklch(70% 0.19 250);

    /**
     * Variation sombre: -10% luminosité
     *
     * Même principe que la variation claire mais dans l'autre direction.
     * Utilisée pour les états pressed et les éléments nécessitant plus
     * d'emphase visuelle.
     */
    --color-primary-dark: oklch(45% 0.19 250);

    /**
     * Version subtile pour arrière-plans
     *
     * Pour les arrière-plans colorés subtils, nous réduisons drastiquement
     * le chroma (à 0.03) et augmentons la luminosité (à 95%). Cela crée
     * une teinte à peine perceptible qui ajoute de la richesse sans être
     * distrayante ou réduire la lisibilité du texte.
     */
    --color-primary-subtle: oklch(95% 0.03 250);

    /* ========================================
     *      COULEURS SECONDAIRES - BLEU PROFOND
     *      ======================================== */

    /**
     * Couleur secondaire: Bleu profond d'autorité
     *
     * OKLCH: 35% luminosité, 0.12 chroma, 260° teinte
     *
     * Cette couleur plus sombre et plus désaturée fournit un contrepoids
     * au bleu primaire vibrant. Elle est utilisée pour les éléments nécessitant
     * plus de gravité ou de subtilité. La luminosité réduite (35%) et le
     * chroma plus faible (0.12) créent une couleur sophistiquée et mature.
     */
    --color-secondary: oklch(35% 0.12 260);
    --color-secondary-light: oklch(45% 0.12 260);
    --color-secondary-dark: oklch(25% 0.12 260);

    /* ========================================
     *      COULEURS DE FOND - GRIS NEUTRES
     *      ======================================== */

    /**
     * Fond principal: Gris très pâle
     *
     * OKLCH: 98% luminosité, 0.003 chroma, 250° teinte
     *
     * Stratégie pour les neutres en OKLCH:
     * Plutôt qu'utiliser un gris parfaitement neutre (chroma zéro), nous
     * ajoutons un chroma extrêmement faible (0.003) avec la même teinte
     * que notre couleur primaire. Cela crée un "gris coloré" qui s'harmonise
     * subtilement avec la palette sans être évidemment teinté. Cette technique
     * ajoute de la richesse et de la cohésion à l'ensemble du design.
     */
    --color-background: oklch(98% 0.003 250);

    /**
     * Surface: Entre le fond et le blanc pur
     *
     * Les surfaces représentent des éléments légèrement élevés au-dessus
     * du fond, comme des cartes ou des panneaux. Cette légère différence
     * de luminosité crée une perception subtile de profondeur.
     */
    --color-surface: oklch(96% 0.004 250);

    /**
     * Surface élevée: Blanc pur
     *
     * Pour les éléments nécessitant le contraste maximum, nous utilisons
     * un blanc parfait sans aucune teinte. Cent pour cent de luminosité
     * et zéro chroma créent le blanc le plus pur possible.
     */
    --color-surface-elevated: oklch(100% 0 0);

    /**
     * État hover des surfaces
     *
     * Quand l'utilisateur survole une surface interactive, nous la rendons
     * légèrement plus sombre que la surface normale mais toujours bien plus
     * claire que le fond, créant un feedback visuel clair et immédiat.
     */
    --color-surface-hover: oklch(94% 0.005 250);

    /* ========================================
     *      COULEURS DE TEXTE
     *      ======================================== */

    /**
     * Texte principal: Noir doux
     *
     * OKLCH: 20% luminosité, 0.01 chroma, 250° teinte
     *
     * Pourquoi pas noir pur:
     * Un noir absolu (0% luminosité) crée un contraste trop brutal qui
     * peut être fatigant pour les yeux lors de lectures prolongées. Un
     * noir légèrement adouci à vingt pour cent de luminosité maintient
     * une excellente lisibilité (ratio de contraste supérieur à quinze
     * sur un par un sur blanc) tout en étant plus confortable visuellement.
     *
     * Le chroma minimal (0.01) avec la teinte de la couleur primaire (250°)
     * crée une cohésion subtile entre le texte et les autres éléments colorés.
     */
    --color-text: oklch(20% 0.01 250);

    /**
     * Texte atténué: Pour informations secondaires
     *
     * +35% luminosité du texte principal. Cette progression garantit une
     * hiérarchie claire tout en maintenant un ratio de contraste supérieur
     * à quatre point cinq sur un par un, respectant WCAG AA.
     */
    --color-text-muted: oklch(55% 0.01 250);

    /**
     * Texte subtil: Pour informations tertiaires
     *
     * +50% luminosité du texte principal. Utilisé pour les placeholders,
     * les labels désactivés et autres textes de faible importance. Le ratio
     * de contraste est d'environ trois sur un par un, acceptable pour les
     * grands textes selon WCAG AA.
     */
    --color-text-subtle: oklch(70% 0.008 250);

    /**
     * Texte inverse: Pour texte sur fonds sombres
     *
     * Un blanc presque pur avec une teinte minimale. Pas tout à fait cent
     * pour cent de luminosité car cela peut être éblouissant sur des fonds
     * très sombres. Quatre-vingt-dix-huit pour cent offre un excellent
     * contraste tout en étant plus confortable.
     */
    --color-text-inverse: oklch(98% 0.003 250);

    /* ========================================
     *      COULEURS SÉMANTIQUES
     *      ======================================== */

    /**
     * Succès: Vert vif
     *
     * OKLCH: 60% luminosité, 0.18 chroma, 145° teinte
     *
     * Stratégie pour les couleurs sémantiques:
     * Toutes nos couleurs sémantiques utilisent des valeurs de chroma
     * similaires (0.16 à 0.19) et des luminosités dans une gamme restreinte
     * (55% à 65%). Cette cohérence garantit qu'elles ont toutes la même
     * "présence" visuelle et qu'aucune ne domine visuellement les autres.
     * Cela crée une harmonie et un équilibre dans l'interface.
     *
     * La teinte 145° est un vert légèrement bleuté qui communique fraîcheur
     * et positivité tout en s'harmonisant bien avec notre bleu primaire.
     */
    --color-success: oklch(60% 0.18 145);
    --color-success-light: oklch(72% 0.18 145);

    /**
     * Avertissement: Orange doré
     *
     * OKLCH: 65% luminosité, 0.17 chroma, 65° teinte
     *
     * La teinte 65° est un orange chaud qui attire l'attention sans alarmer.
     * La luminosité légèrement plus élevée (65%) par rapport aux autres
     * couleurs sémantiques reflète le fait que les oranges et jaunes
     * paraissent naturellement plus clairs à l'œil humain.
     */
    --color-warning: oklch(65% 0.17 65);
    --color-warning-light: oklch(75% 0.17 65);

    /**
     * Erreur: Rouge vif
     *
     * OKLCH: 55% luminosité, 0.19 chroma, 25° teinte
     *
     * Un rouge avec une luminosité modérée qui communique clairement un
     * problème sans être agressif. La teinte 25° est un rouge légèrement
     * orangé qui est plus accessible et moins brutal qu'un rouge pur.
     */
    --color-error: oklch(55% 0.19 25);
    --color-error-light: oklch(67% 0.19 25);

    /**
     * Information: Cyan vif
     *
     * OKLCH: 60% luminosité, 0.16 chroma, 210° teinte
     *
     * Un cyan qui se distingue clairement du bleu primaire tout en
     * s'harmonisant avec lui. Utilisé pour les messages informatifs
     * qui ne sont ni positifs ni négatifs.
     */
    --color-info: oklch(60% 0.16 210);
    --color-info-light: oklch(72% 0.16 210);

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

    /**
     * Bordure standard: Gris moyen clair
     *
     * Les bordures utilisent la même stratégie de "gris coloré" que les
     * fonds, avec un chroma minimal dans la teinte primaire pour cohésion.
     * La luminosité de 88% crée des séparations visibles sans être lourdes.
     */
    --color-border: oklch(88% 0.004 250);

    /**
     * Bordure hover: Légèrement plus sombre
     *
     * Quand l'utilisateur survole un élément avec bordure, nous rendons
     * la bordure plus visible pour fournir un feedback clair.
     */
    --color-border-hover: oklch(78% 0.006 250);

    /**
     * Bordure focus: Couleur primaire
     *
     * Pour l'état focus (navigation au clavier), nous utilisons directement
     * la couleur primaire pour une visibilité maximale, essentielle pour
     * l'accessibilité.
     */
    --color-border-focus: var(--color-primary);

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

    /**
     * Échelle typographique basée sur 1.25
     *
     * Cette progression crée une hiérarchie claire et harmonieuse. Chaque
     * niveau est environ 1.25 fois plus grand que le précédent, créant
     * des sauts visuels distincts sans être dramatiques.
     */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --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 */

    /**
     * Poids de police
     *
     * Ces valeurs correspondent aux poids standard disponibles dans la
     * plupart des polices système modernes. Les polices variables peuvent
     * offrir des valeurs intermédiaires, mais ces standards garantissent
     * la compatibilité universelle.
     */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /**
     * Hauteurs de ligne
     *
     * Ces valeurs sont optimisées pour différents cas d'usage:
     * - Tight (1.25): Pour les titres où l'espacement serré crée de l'impact
     * - Normal (1.5): Pour le corps du texte, balance lisibilité et densité
     * - Relaxed (1.75): Pour les longs passages nécessitant confort maximal
     */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

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

    /**
     * Échelle d'espacement basée sur 0.25rem (4px)
     *
     * Cette échelle permet de créer des layouts avec des espacements
     * cohérents et prévisibles. Basée sur des multiples de quatre pixels,
     * elle s'aligne naturellement avec la grille de layout de la plupart
     * des designs modernes.
     */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 0.75rem;   /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 6rem;     /* 96px */

    /* ========================================
     *      BORDURES ET RAYONS
     *      ======================================== */

    /**
     * Rayons de bordure
     *
     * Une progression de rayons pour différents cas d'usage. Les coins
     * légèrement arrondis (sm à lg) créent une esthétique moderne et
     * friendly sans être trop casual ou ludique.
     */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* Cercle parfait */

    /**
     * Épaisseurs de bordure
     *
     * Deux épaisseurs standard pour des bordures subtiles ou plus prononcées.
     */
    --border-width: 1px;
    --border-width-thick: 2px;

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

    /**
     * Ombres avec teinte bleue subtile
     *
     * Plutôt que des ombres grises neutres, nous utilisons une teinte bleue
     * très désaturée qui s'harmonise avec notre couleur primaire. L'opacité
     * est ajustée via le canal alpha (le / 0.08 à la fin) pour créer la
     * profondeur appropriée.
     *
     * La luminosité à 0% avec un chroma minimal crée une ombre très sombre
     * mais pas complètement noire, plus naturelle que les ombres pures.
     */
    --shadow-xs: 0 1px 2px 0 oklch(0% 0.01 250 / 0.08);
    --shadow-sm: 0 1px 3px 0 oklch(0% 0.01 250 / 0.12), 0 1px 2px 0 oklch(0% 0.01 250 / 0.08);
    --shadow-md: 0 4px 6px -1px oklch(0% 0.01 250 / 0.12), 0 2px 4px -1px oklch(0% 0.01 250 / 0.08);
    --shadow-lg: 0 10px 15px -3px oklch(0% 0.01 250 / 0.12), 0 4px 6px -2px oklch(0% 0.01 250 / 0.08);
    --shadow-xl: 0 20px 25px -5px oklch(0% 0.01 250 / 0.12), 0 10px 10px -5px oklch(0% 0.01 250 / 0.06);

    /* ========================================
     *      TRANSITIONS
     *      ======================================== */

    /**
     * Durées de transition
     *
     * Ces durées sont calibrées pour créer des animations qui se sentent
     * réactives sans être brusques:
     * - Fast (150ms): Pour petits changements d'état (hover, focus)
     * - Base (250ms): Pour transitions standard
     * - Slow (350ms): Pour changements plus complexes ou dramatiques
     */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ========================================
     *      LARGEURS MAXIMALES
     *      ======================================== */

    /**
     * Largeurs maximales pour différents contextes
     *
     * - Prose: 65 caractères est optimal pour la lisibilité du texte
     * - Container: 1280px balance utilisation d'espace et confort de lecture
     * - Narrow: Pour contenu centré nécessitant focus
     * - Wide: Pour layouts nécessitant plus d'espace horizontal
     */
    --max-width-prose: 65ch;
    --max-width-container: 1280px;
    --max-width-narrow: 768px;
    --max-width-wide: 1536px;
}