/* ==========================================================================
   GlobalExam Duel : variables de thème.
   Tout le look se règle ici. Changer ces valeurs suffit à rebrander le site.
   Base claire et aérée ; la classe .dark (ou body.is-dark) bascule une zone
   en mode « scène » pour les moments de spectacle (duel, VS, légendes).
   Couleurs issues de la charte GlobalExam (logo : orange + violet).
   ========================================================================== */

@font-face { font-family: 'Montserrat'; font-weight: 200; font-display: swap; src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 300; font-display: swap; src: url('../fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-display: swap; src: url('../fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); }

:root {
  /* Surfaces (clair) */
  --bg:            #FFFFFF;
  --bg-alt:        #F5F5F7;   /* sections alternées, cartes « bento » */
  --bg-raised:     #FFFFFF;
  --bg-sunken:     #EDEDF0;
  --line:          rgba(0, 0, 0, 0.08);
  --line-strong:   rgba(0, 0, 0, 0.16);
  --glass:         rgba(255, 255, 255, 0.72);
  --shadow:        0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
  --shadow-lg:     0 2px 4px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.10);

  /* Texte */
  --text:          #1D1D1F;
  --text-2:        #6E6E73;
  --text-3:        #8E8E93;

  /* Les deux camps du duel = les deux couleurs du logo GlobalExam */
  --team-a:        #7C3AED;   /* violet */
  --team-a-deep:   #5B21B6;
  --team-a-soft:   rgba(124, 58, 237, 0.10);
  --team-b:        #F26410;   /* orange */
  --team-b-deep:   #C2410C;
  --team-b-soft:   rgba(242, 100, 16, 0.10);

  /* Accents */
  --brand:         #7C3AED;
  --gold:          #B8862B;   /* or lisible sur fond clair */
  --gold-bright:   #E9C46A;   /* or sur fond sombre */
  --gold-soft:     rgba(184, 134, 43, 0.12);
  --win:           #1F9D63;
  --loss:          #8E8E93;

  /* Ceintures CECR (dupliquées dans data.js pour le canvas de partage) */
  --belt-a1:       #E5E5EA;
  --belt-a2:       #F5C84B;
  --belt-b1:       #F08A3C;
  --belt-b2:       #34A873;
  --belt-c1:       #3E6FE0;
  --belt-c2:       #1D1D1F;

  /* Corde */
  --rope:          #D8CFBF;
  --rope-shadow:   rgba(0, 0, 0, 0.16);
  --rope-twist:    rgba(60, 40, 20, 0.07);
  --knot:          #1D1D1F;   /* noeud et ruban de la corde */
  --knot-2:        #4A4A50;

  /* Typographie : une seule famille, Montserrat, utilisée comme une grotesque moderne */
  --font:          'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Montserrat', system-ui, sans-serif;

  /* Échelle pensée pour la projection : rien sous 15 px */
  --fs-xs:   clamp(13px, 0.8vw, 15px);
  --fs-sm:   clamp(15px, 0.95vw, 17px);
  --fs-md:   clamp(17px, 1.15vw, 21px);
  --fs-lg:   clamp(21px, 1.5vw, 28px);
  --fs-xl:   clamp(28px, 2.5vw, 46px);
  --fs-2xl:  clamp(38px, 4vw, 76px);
  --fs-hero: clamp(46px, 6vw, 112px);
  --fs-giant: clamp(110px, 16vw, 300px);

  /* Rythme */
  --gutter:  clamp(20px, 4vw, 72px);
  --radius:  20px;
  --radius-lg: 32px;
  --nav-h:   56px;
  --section: clamp(96px, 16vh, 200px);   /* respiration entre deux temps du récit */

  /* Mouvement */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:         600ms;
}

/* Mode scène : mêmes noms de variables, valeurs sombres */
.dark, body.is-dark {
  --bg:            #000000;
  --bg-alt:        #101012;
  --bg-raised:     #161618;
  --bg-sunken:     #000000;
  --line:          rgba(255, 255, 255, 0.10);
  --line-strong:   rgba(255, 255, 255, 0.20);
  --glass:         rgba(22, 22, 24, 0.66);
  --shadow:        0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-lg:     0 30px 80px rgba(0, 0, 0, 0.6);
  --text:          #F5F5F7;
  --text-2:        #A1A1A6;
  --text-3:        #6E6E73;
  --team-a:        #9F7AEA;
  --team-b:        #FF8A3D;
  --team-a-soft:   rgba(159, 122, 234, 0.16);
  --team-b-soft:   rgba(255, 138, 61, 0.16);
  --gold:          #E9C46A;
  --belt-a1:       #F2F2F5;
  --belt-c2:       #0A0A0A;
  --rope:          #ECE5D8;
  --rope-shadow:   rgba(0, 0, 0, 0.55);
  --rope-twist:    rgba(60, 40, 20, 0.22);
  --knot:          #FFFFFF;
  --knot-2:        #CFC8BC;
}