/**
 * Bohio MAG - Design Tokens
 * Thème jaune/noir (WCAG AAA) - Blueprint section 14
 */

:root {
    /* Couleurs principales - Jaune #FFEE00 / #FFD700 sur noir */
    --primary: #FFD700;
    --primary-dark: #E6C200;
    --primary-light: #FFEE00;
    --secondary: #1a1a1a;
    --accent: #FFD700;
    
    /* Sémantiques */
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    
    /* Gris — inversés pour le thème sombre.
       The ramp is used both ways round: low numbers as subtle SURFACES, high
       numbers as TEXT. Inverting it keeps both readings correct, so a rule
       saying `color: var(--gray-900)` stays "strongest text" and one saying
       `background: var(--gray-100)` stays "faintly raised panel". Patching the
       call sites individually would have broken whichever meaning was missed. */
    --gray-50:  #17151A;
    --gray-100: #1E1B21;
    --gray-200: #262229;
    --gray-300: #332E38;
    --gray-400: #6E6875;
    --gray-500: #9A938F;
    --gray-600: #B4ADA4;
    --gray-700: #CFC8BF;
    --gray-800: #E4DFD8;
    --gray-900: #F3F0EC;
    
    /* Backgrounds — dark theme. Warm-tinted charcoals rather than pure black or
       blue-grey: a neutral #111 next to the yellow accent reads cold, and pure
       black makes the covers look like they are floating in a void. Surfaces
       step up in lightness (page < band < card) so depth comes from tone, not
       from borders. */
    --bg-primary: #121013;
    --bg-secondary: #1A171B;
    --bg-dark: #000000;
    --bg-card: #201D22;

    /* Texte - Contraste élevé sur fond sombre.
       --text-primary on --bg-primary is ~15:1 (WCAG AAA). */
    --text-primary: #F3F0EC;
    --text-secondary: #B7B0A7;
    --text-light: #8B847B;
    --text-inverse: #1A1419;

    /* Bordures */
    --border-color: #322D34;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    
    /* Ombres */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    --transition: all 0.2s ease-in-out;
}