/*
 * Grillorama — variables de la charte graphique.
 * À importer dans l'application : @import "../charte/tokens.css";
 * Polices : Fredoka (titres), Nunito (texte), Atkinson Hyperlegible (lettres des grilles),
 * via Google Fonts :
 * https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap
 */

:root {
  /* Couleurs de marque */
  --gr-violet: #302346;   /* logo, textes, contours */
  --gr-orange: #F47735;   /* sélection, actions principales */
  --gr-ivoire: #FFF8ED;   /* fonds et cases */
  --gr-lavande: #D8C9F0;  /* fonds secondaires */
  --gr-vert: #376B57;     /* mots trouvés, réussite */

  /* Nuances dérivées (survol, appui, traits légers) */
  --gr-violet-80: #594F6B;
  --gr-violet-20: #D6D3DA;
  --gr-orange-fonce: #D9601F;
  --gr-orange-clair: #FCD9C4;
  --gr-lavande-clair: #EEE7F9;
  --gr-vert-clair: #D3E4DC;

  /* Rôles */
  --gr-fond: var(--gr-ivoire);
  --gr-fond-secondaire: var(--gr-lavande);
  --gr-texte: var(--gr-violet);
  --gr-texte-doux: var(--gr-violet-80);
  --gr-contour: var(--gr-violet);
  --gr-action: var(--gr-orange);
  --gr-action-texte: var(--gr-violet);  /* jamais de blanc sur orange : contraste 2,8 */
  --gr-selection: var(--gr-orange);
  --gr-reussite: var(--gr-vert);
  --gr-reussite-texte: var(--gr-ivoire);

  /* Typographie */
  --gr-police-titre: "Fredoka", "Nunito", system-ui, sans-serif;
  --gr-police-texte: "Nunito", system-ui, sans-serif;
  --gr-police-grille: "Atkinson Hyperlegible", "Verdana", sans-serif;

  /* Formes */
  --gr-rayon-case: 8px;      /* cases de grille : ≈ 18 % du côté */
  --gr-rayon-bouton: 14px;
  --gr-rayon-carte: 20px;
  --gr-rayon-plaque: 28px;   /* plaque violette du logo, grands conteneurs */
  --gr-trait: 2px;
  --gr-trait-fort: 3px;
  --gr-ombre: 0 3px 0 var(--gr-violet);  /* ombre pleine, effet « tuile » */
}