/* ============================================
   variables.css - Tailles, Structure et Polices
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
    /* TYPOGRAPHIE (en rem pour l'accessibilité RGAA - s'adapte au zoom navigateur) */
    --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;
    --font-body: var(--font-mono);
    --font-heading: var(--font-mono);

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px - Base RGAA */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.5rem;     /* 24px */
    --text-2xl: 2rem;      /* 32px */
    --text-hero: 3.5rem;   /* 56px */

    /* STRUCTURE ET ARRONDIS (Style Maquettes) */
    --grid-size: 30px;        /* Taille grille thème light (points) */
    --grid-size-dark: 22px;   /* Taille grille thème dark (carreaux) */
    --radius-sm: 8px;      /* Boutons, tags */
    --radius-md: 16px;     /* Cartes, stats */
    --radius-apple: 24px;  /* Modales, grosses images */

    /* EFFETS GLASSMORPHISM PAR DÉFAUT */
    --glass-blur: 12px;
}