/* ==========================================================================
   Design tokens — source de vérité (édition #8, soirée concert 22 août 2026)
   Palette et typographie tirées de l'affiche officielle et des polices fournies
   par le client. Aucune valeur de couleur/typo/espacement en dur ailleurs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices fournies par le client (dossier partagé).
   - Core Circus 2D Double : logo + très grands titres d'affiche.
   - Maven Pro (variable)  : titres et éléments forts (jeu sur les graisses).
   - Frutiger LT Std Light Cn : corps de texte (police fine).
   Formats servis : woff2 uniquement (support universel, ~52% plus léger que
   les OTF/TTF d'origine, désormais retirés du dépôt).
   NB licence : Core Circus et Frutiger sont des polices commerciales ; elles
   sont intégrées ici à la demande du client (assets fournis). À sécuriser
   côté licence avant mise en production publique. Maven Pro est sous OFL.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Core Circus 2D Double";
  src: url("../fonts/CoreCircus2DDouble.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maven Pro";
  src: url("../fonts/MavenPro.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frutiger";
  src: url("../fonts/Frutiger-LightCn.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette de marque (extraite de l'affiche officielle 2026) --- */
  --brand-toucan: #27367e;          /* bleu nuit du toucan */
  --brand-toucan-deep: #1c2a63;     /* variante foncée */
  --brand-teal: #17a6a1;            /* turquoise feuillage */
  --brand-teal-deep: #0e7d79;       /* turquoise foncé (texte sur clair ≥ 4.5:1) */
  --brand-green: #00983a;           /* vert feuille */
  --brand-green-deep: #007a2e;      /* vert foncé accessible */
  --brand-orange: #f08111;          /* orange (fond dégradé) */
  --brand-coral: #ec683b;           /* corail (bas du dégradé) */
  --brand-red: #e74317;             /* rouge bec */
  --brand-red-deep: #c8360f;        /* rouge foncé (texte sur crème : 4.9:1) */
  --brand-yellow: #ffd621;          /* jaune bec / accents */
  --brand-yellow-logo: #f7e82a;     /* jaune citron du logo */
  --brand-cream: #fdf6e9;           /* crème (surfaces claires) */
  --brand-ink: #1a1430;             /* encre (texte) */
  --white: #ffffff;
  --black: #111018;

  /* --- Rôles sémantiques (thème unique, lumineux) --- */
  --color-bg: var(--brand-cream);
  --color-surface: var(--white);
  --color-surface-alt: #fbe9d3;     /* crème ambrée */
  --color-text: var(--brand-ink);
  --color-text-muted: #5a5470;
  --color-border: var(--brand-ink);
  --color-accent: var(--brand-teal-deep);     /* fond plein + texte blanc */
  --color-on-accent: var(--white);
  --color-accent-2: var(--brand-coral);
  --color-on-accent-2: var(--brand-ink);   /* encre sur corail : 5.6:1 (blanc : 3.2:1, insuffisant) */
  --color-focus: var(--brand-toucan);

  /* --- Dégradé d'ambiance (fond hero, repris de Fond.svg) --- */
  --gradient-hero: radial-gradient(circle at 70% 15%, var(--brand-orange) 0%, var(--brand-coral) 70%, #d9542e 100%);
  --gradient-night: linear-gradient(160deg, var(--brand-toucan) 0%, var(--brand-toucan-deep) 60%, #11183f 100%);

  /* --- États (succès / erreur / info) --- */
  --color-success: #1a7f4b;
  --color-error: #c4123a;
  --color-info: var(--brand-toucan);
  --color-on-status: var(--white);

  /* --- Typographie --- */
  --font-logo: "Core Circus 2D Double", "Arial Black", system-ui, sans-serif;
  --font-display: "Maven Pro", "Arial Black", system-ui, sans-serif;
  --font-body: "Frutiger", "Maven Pro", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide (clamp : mini, préférée fluide, maxi) */
  --text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.88rem);
  --text-sm: clamp(0.9rem, 0.86rem + 0.18vw, 1rem);
  --text-base: clamp(1.02rem, 0.97rem + 0.25vw, 1.18rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.55rem + 2.1vw, 3.2rem);
  --text-3xl: clamp(2.6rem, 1.7rem + 4vw, 4.6rem);
  --text-display: clamp(3rem, 1.6rem + 7vw, 8rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 700;
  --weight-bold: 800;
  --weight-black: 900;
  --leading-tight: 0.95;
  --leading-snug: 1.12;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;

  /* --- Espacement — échelle nommée du référentiel (1.Regles.md §4 & §13).
     Grille 8pt, base 1rem = 16px. Noms sémantiques = source de vérité. --- */
  --space-3xs: 0.25rem;  /*   4px */
  --space-2xs: 0.5rem;   /*   8px */
  --space-xs:  0.75rem;  /*  12px */
  --space-sm:  1rem;     /*  16px */
  --space-md:  1.5rem;   /*  24px */
  --space-lg:  2rem;     /*  32px */
  --space-xl:  3rem;     /*  48px */
  --space-2xl: 4rem;     /*  64px */
  --space-3xl: 6rem;     /*  96px */
  --space-4xl: 8rem;     /* 128px */

  /* --- Rayons, bordures, ombres --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --border-width: 3px;
  --shadow-block: 7px 7px 0 var(--color-border);
  --shadow-block-hover: 3px 3px 0 var(--color-border);
  --shadow-block-night: 4px 4px 0 var(--brand-toucan);  /* variante sur fonds sombres/nuit */
  --shadow-soft: 0 18px 40px -24px rgba(26, 20, 48, 0.55);

  /* --- Points de rupture (référence) --- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --- Couches z-index documentées --- */
  --z-base: 0;
  --z-decor: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-loader: 450;
  --z-skiplink: 500;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 520ms;

  /* --- Largeur de contenu --- */
  --content-max: 1180px;
  --content-pad: clamp(1rem, 4vw, 3rem);
  /* Mesure de lecture confortable (1.Regles.md §8 : 45-75 caractères, ~65ch). */
  --measure: 65ch;
  /* Cible tactile minimale (1.Regles.md §10 & §13). */
  --touch-target: 44px;

  /* --------------------------------------------------------------------
     Jeu « Compose ta mélodie » — chaque token référence une valeur de
     marque déjà définie ci-dessus, aucune nouvelle couleur (CDC §4.2).
     -------------------------------------------------------------------- */
  --melodie-bg: var(--gradient-night);
  --melodie-surface: var(--brand-toucan-deep);
  --melodie-text: var(--brand-cream);
  --melodie-key-white: var(--brand-cream);
  --melodie-key-black: var(--brand-ink);
  --melodie-glow-piano: var(--brand-teal);
  --melodie-glow-guitare: var(--brand-yellow);
  --melodie-glow-trompette: var(--brand-coral);
  --melodie-rec: var(--brand-red);
}