/* NOOVA — tokens
   Source unique de vérité pour couleur, espacement, rayon, typo.
   Aucune valeur en dur ailleurs dans le projet. */

:root {
  /* --- Couleurs de marque (valeurs brutes, à ne consommer que via les ambiances ci-dessous,
         ou pour les fonds plein écran de marque) --- */
  --marque-creme:  #FFFBD7;  /* fond crème des écrans Accueil, Question, Récompenses, Profil */
  --marque-encre:  #1C0E02;  /* brun NOOVA : texte sur crème et sur jaune */
  --marque-marron: #1C0E02;  /* fond à carreaux de Communauté */
  --marque-or-1:   #F29715;  /* dégradé or : départ */
  --marque-or-2:   #FFDA09;  /* dégradé or : arrivée */
  --or:  linear-gradient(100deg, var(--marque-or-1) 0%, var(--marque-or-2) 100%); /* moments forts uniquement */
  --marque-brule:  #A14E08;  /* or brûlé : pastille de points, carte portefeuille, avatars */

  /* --- Fonds (ambiance brune, par défaut) --- */
  --bg:         #1C0E02;   /* fond d'écran : le brun NOOVA */
  --surface:    #2A1A0B;   /* cartes, barres */
  --surface-2:  #3A2715;   /* carte sélectionnée ou active */
  --trait:      #4A3420;   /* bordures et séparateurs, 1px */

  /* --- Texte --- */
  --text:       #FFFBD7;   /* crème */
  --text-2:     #D9C9A8;   /* secondaire, libellés */
  --text-3:     #A89478;   /* désactivé */

  /* --- Accent unique --- */
  --jaune:      #FFC300;   /* valeur exacte du logo (favicon.svg) */
  --jaune-ink:  #1C0E02;   /* texte posé sur le jaune */
  --blanc:      #FFFFFF;   /* texte sur photo ou sur aplat sombre de marque */
  --jaune-faible: #3D2B08; /* fond discret d'un état jaune, jamais un bouton */
  --bandeau:       var(--marque-encre);  /* bandeau et pop-up par-dessus n'importe quel écran (message reçu) */
  --bandeau-texte: var(--marque-creme);
  --voile:         rgba(28,14,2,.72);     /* fond assombri derrière une pop-up : l'app est figée dessous */
  --jaune-pale: #FFF3D1;   /* bandeau clair de marque (illustrations d’accueil), toutes ambiances */

  /* --- États --- */
  --ok:         #5FD39B;
  --ok-ink:     #0C2419;
  --erreur:     #FF6B5E;
  --erreur-ink: #FFFFFF;
  --erreur-fort: #B42318;  /* aplat rouge sous texte blanc (bandeau « version test ») : AA */

  /* --- Rayons : quatre valeurs, pas une de plus --- */
  --r-xs:       4px;   /* étiquettes (prix, statut, palier) : l'étiquette du commerçant */
  --r-sm:       10px;  /* boutons, champs, vignettes */
  --r-md:       14px;  /* cartes */
  --r-lg:       20px;  /* feuilles du bas et grands bandeaux de marque uniquement */
  --r-pill:     999px; /* avatars et interrupteurs uniquement */

  /* --- Espacements (multiples de 4) --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;   /* marge latérale de l'écran */
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* --- Typographie : deux familles, auto-hébergées (fonts/noova-fonts.css) --- */
  --font-titre: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; /* titres, chiffres */
  --font:       'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;   /* texte courant */

  /* Échelle de tailles : neuf crans. Toute taille de police vient d'ici. */
  --fs-1: 11px;  /* micro : étiquettes, badges */
  --fs-2: 13px;  /* libellés, méta, légendes */
  --fs-3: 15px;  /* texte courant */
  --fs-4: 17px;  /* titre de carte, bouton */
  --fs-5: 21px;  /* titre d'écran */
  --fs-6: 28px;  /* grand chiffre */
  --fs-7: 34px;  /* titre d'accueil, question plein écran */
  --fs-8: 48px;  /* solde de points */
  --fs-9: 72px;  /* code en caisse, curseur */

  --t-display: 800 var(--fs-7)/1.08 var(--font-titre);
  --t-title:   800 var(--fs-5)/1.2  var(--font-titre);
  --t-body:    400 var(--fs-3)/1.5  var(--font);
  --t-label:   600 var(--fs-2)/1.3  var(--font);
  --t-chiffre: 800 var(--fs-3)/1    var(--font-titre);

  --lettrage-titre: -0.02em;

  /* --- Hauteurs --- */
  --h-bouton:   52px;
  --h-option:   56px;
  --h-barre:    56px;
  --tactile-min: 44px;
}

/* --- Ambiances : l'app est volontairement mixte (voir NOOVA_DESIGN.md §2).
       Une ambiance ne change QUE les couleurs. Rayons, typo, espacements et composants
       sont identiques partout : c'est ce qui fait que l'app reste une seule app. --- */
.amb-creme {
  --bg:        var(--marque-creme);
  --surface:   #FFFFFF;
  --surface-2: #FFF0A8;
  --trait:     #EADFB8;
  --text:      var(--marque-encre);
  --text-2:    #6B5A45;
  --text-3:    #8C7A62;
  --jaune-faible: #FFF3D1;
  --ok:        #17663F;   /* vert assombri : AA sur crème, blanc et jaune pâle */
  --erreur:    #B42318;
}
.amb-marron {
  --bg:        var(--marque-marron);
  --surface:   #FFFBD7;
  --surface-2: #FFF0A8;
  --trait:     #EADFB8;
  --text:      var(--marque-encre);
  --text-2:    #6B5A45;
  --text-3:    #8C7A62;
  --jaune-faible: #FFF3D1;
  --ok:        #17663F;   /* vert assombri : AA sur crème, blanc et jaune pâle */
  --erreur:    #B42318;
}

/* Le fond couvre tout l'écran, encoches comprises */
html, body {
  background: var(--bg);
  color: var(--text);
  font: var(--t-body);
  min-height: 100%;
}

body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Aucune ombre dans l'app */
* { box-shadow: none; }

h1 { font: var(--t-display); letter-spacing: var(--lettrage-titre); }
h2 { font: var(--t-title);   letter-spacing: var(--lettrage-titre); }

.points, .stat, .compteur, .prix {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}