/* =========================================================================
   ODYSSEO — tokens.css
   Variables globales du site : POLICES, COULEURS, ESPACEMENTS.
   C'est LE seul fichier à éditer pour changer la charte (police / couleurs).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES AUTO-HÉBERGÉES (WOFF2, dans /assets/fonts)
      Deux polices variables : un seul fichier couvre toutes les graisses.

      • Titres / logo : Fredoka  →  PLACEHOLDER LIBRE de « Croogla Bold ».
        Quand la licence Croogla sera acquise : déposer les .woff2 dans
        /assets/fonts, ajouter leurs @font-face ci-dessous, puis remplacer la
        valeur de --font-display plus bas (une seule ligne).
      • Corps de texte : Fraunces (serif éditorial, gratuite — SIL OFL).
   ------------------------------------------------------------------------- */

/* — Corps : Fraunces (variable, 100–900) — */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* — Titres / logo : Fredoka (variable, 300–700) — placeholder de Croogla Bold — */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* =======================================================================
     ← POUR CHANGER LA POLICE DE TOUT LE SITE, MODIFIER ICI
     Il suffit de changer la valeur de ces deux variables (et, si c'est une
     police auto-hébergée, d'ajouter son @font-face ci-dessus).
     Exemple pour passer à Croogla une fois licenciée :
        --font-display: "Croogla", "Fredoka", sans-serif;
     ======================================================================= */
  --font-display: "Fredoka", system-ui, sans-serif;   /* titres + logo (Croogla) */
  --font-body:    "Fraunces", Georgia, serif;         /* corps de texte */

  /* -----------------------------------------------------------------------
     COULEURS DE MARQUE — charte Odysseo (un seul endroit pour l'ajuster)
     Principales : navy #0D1B2E · crème #F5EEE3   —   Accent : orange #E3531F
     ----------------------------------------------------------------------- */
  --color-navy:    #0D1B2E;  /* couleur principale foncée */
  --color-cream:   #F5EEE3;  /* couleur principale claire (fond) */
  --color-orange:  #E3531F;  /* couleur d'accentuation (marque) */

  /* Variantes dérivées (rythme des sections + états) */
  --color-navy-2:  #13253C;  /* navy légèrement relevé (cartes/pied de page) */
  --color-cream-2: #EFE5D5;  /* crème plus soutenu (alternance de sections) */
  --color-surface: #FCFAF5;  /* blanc chaud (fond des cartes sur clair) */

  /* Orange des boutons : légèrement assombri pour le contraste WCAG AA du
     texte blanc (#C8461A ≈ 4,9:1). L'orange de marque #E3531F reste sur le
     point du logo, les intitulés d'accroche et les petits accents. */
  --color-orange-btn:   #C8461A;
  --color-orange-hover: #AD3B14;

  /* Textes sur fond CLAIR (crème) */
  --color-ink:       #0D1B2E;  /* texte principal */
  --color-ink-soft:  #34435A;  /* texte secondaire */
  --color-ink-dim:   #5E6B7E;  /* texte discret / légendes */

  /* Textes sur fond FONCÉ (navy) */
  --color-on-dark:       #F5EEE3;
  --color-on-dark-soft:  #C7BCA9;
  --color-on-dark-dim:   #9AA6B4;

  /* Lignes / bordures discrètes */
  --color-line:       rgba(13, 27, 46, 0.12);   /* sur clair */
  --color-line-dark:  rgba(245, 238, 227, 0.16); /* sur foncé */

  /* -----------------------------------------------------------------------
     ESPACEMENTS, RAYONS, LARGEURS
     ----------------------------------------------------------------------- */
  --radius-card:  22px;
  --radius-input: 12px;
  --radius-pill:  999px;

  --shadow-soft: 0 18px 40px -24px rgba(13, 27, 46, 0.35);
  --shadow-card: 0 24px 60px -30px rgba(13, 27, 46, 0.40);

  --wrap:      1180px;  /* largeur max du contenu (nav, footer, hero) */
  --wrap-text: 1120px;  /* largeur max des sections de contenu */
  --pad-x:     40px;    /* marge horizontale des sections */

  --nav-height: 72px;
}