/* Hello-Max — design tokens (charte graphique, produit Fluxcaler)
 * Source : :root et body de hello-max.com (2026-05-23).
 * Énergie : dark theme noir pur, rouge signature + dégradé rouge→orange.
 * Règle absolue : le rouge #ff0000 jamais en aplat large — il agresse l'œil.
 *                 le gradient .g (linear 135deg #ff0000→#ff3333→#ff6b35) est la signature visuelle.
 * Règle charte (universelle Mélodie) : noir + blanc + rouge + bleu + vert sont les 5 PRIMITIVES.
 *                 Si pas dans l'ADN marque → ajouter une version cohérente avec le ton.
 */

:root {
  /* 1. Couleurs primitives (5 obligatoires — règle charte universelle) */
  --color-black: #000000;        /* noir pur — fond signature */
  --color-white: #f5f5f5;        /* blanc cassé — texte par défaut */
  --color-red:   #ff0000;        /* rouge signature Hello-Max */
  --color-blue:  #3b82f6;        /* bleu — info, liens, notifications */
  --color-green: #97c459;        /* vert clair — succès, validations, états actifs */

  /* 2. Boutons CTA */
  --cta-bg:         #ff0000;     /* rouge signature Fluxcaler */
  --cta-bg-hover:   #cc0000;     /* rouge foncé au hover */
  --cta-text:       #ffffff;     /* blanc pur sur rouge */
  --cta-text-hover: #ffffff;
  --cta-link:       #ff6b35;     /* lien = orange accent (lisible sur fond sombre) */
  --cta-link-hover: #ff0000;

  /* 3. Sections (3 — gradation dark) */
  /* Section 1 — Fond principal (noir pur) */
  --section-1-bg:        #000000;
  --section-1-text:      #f5f5f5;
  --section-1-highlight: #ff0000;

  /* Section 2 — Cards (légèrement levé) */
  --section-2-bg:        #0a0a0a;
  --section-2-text:      #f5f5f5;
  --section-2-highlight: #ff6b35;

  /* Section 3 — Elevated (modals, dropdowns) */
  --section-3-bg:        #121216;
  --section-3-text:      #f5f5f5;
  --section-3-highlight: #ff3333;

  /* Typographie — Satoshi via Fontshare (pas Google Fonts) */
  --font-heading:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-body:       'Satoshi', system-ui, -apple-system, sans-serif;
  --font-size-base:  18px;
  --line-height:     1.2em;
  --font-weight-heading: 900;
  --font-weight-body:    400;
  --heading-letter-spacing: -0.8px;
  --heading-word-spacing:   0.08em;
  --heading-line-height:    1.12;

  /* Layout */
  --max-width-main:    90rem;
  --max-width-medium:  60rem;
  --max-width-normal:  50rem;
  --max-width-small:   41.5rem;
  --radius-large:      10px;
  --radius-small:      0px;

  --google-fonts-href: 'https://api.fontshare.com/v2/css?f[]=satoshi@900,400&display=swap';
  --favicon:    '';
  --apple-icon: '';
  --brand-name:      'Hello-Max';
  --brand-signature: 'Mélodie';

  /* Tokens étendus Fluxcaler (extraits de hello-max.com :root) */
  --fx:        #ff0000;                    /* rouge signature */
  --fx-lt:     #ff3333;                    /* rouge clair */
  --fx-acc:    #ff6b35;                    /* orange accent (dégradé) */
  --b:         rgba(255, 255, 255, 0.08);  /* border subtile */
  --t2:        rgba(245, 245, 245, 0.65);  /* texte secondaire */
  --t3:        rgba(245, 245, 245, 0.55);  /* texte tertiaire */
  --t4:        rgba(245, 245, 245, 0.40);  /* texte muted */
  --gradient-signature: linear-gradient(135deg, #ff0000, #ff3333 40%, #ff6b35);

  /* Nuances étendues (hors 5 primitives) */
  --green-dark:    #173404;                /* vert foncé — texte sur vert clair, accents profonds */
  --color-purple:  #8b5cf6;                /* violet — secondaire, accents UI (hors primitives) */

  /* Gradients signatures (3 — rouge, vert, bleu→violet) */
  --gradient-red:         linear-gradient(135deg, #ff0000, #ff3333 40%, #ff6b35);
  --gradient-green:       linear-gradient(135deg, #173404, #97c459);
  --gradient-blue-purple: linear-gradient(135deg, #8b5cf6, #3b82f6);

  /* === alias legacy (compatibilité sections existantes — à déprécier) === */
  --color-bg:                  var(--color-black);
  --color-bg-dark:             var(--color-black);
  --color-bg-light:            var(--section-2-bg);
  --color-highlight-on-dark:   var(--section-1-highlight);
  --color-highlight-on-light:  var(--section-1-highlight);
  --color-cta-bg:              var(--cta-bg);
  --color-cta-text:            var(--cta-text);
}

/* Sélection : rouge signature */
::selection { background: #ff0000; color: #ffffff; }