/* ==========================================================================
   tokens.css — Charte visuelle reprise du quiz « Winning Together » (Ooredoo)
   Source : CONTRACT.md §10. Copie locale : aucune dépendance au dossier du quiz.
   Ne contient QUE des @font-face et des variables (+ règles de direction).
   ========================================================================== */

/* ------------------------------- Polices --------------------------------- */
/* Variable fonts (axe wght). Fichiers locaux, aucun appel réseau externe. */
/* Polices allégées : sous-ensemble latin en woff2 (Outfit 33 Ko, Rubik 44 Ko au lieu de 284 Ko en TTF).
   Les caractères hors latin (arabe…) passent par les polices suivantes de la pile. */
@font-face {
  font-family: 'Outfit';
  src: url('/shared/fonts/Outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Rubik';
  src: url('/shared/fonts/Rubik-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  src: url('/shared/fonts/NotoKufiArabic-VariableFont_wght.ttf') format('truetype-variations'),
       url('/shared/fonts/NotoKufiArabic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------- Variables -------------------------------- */
:root {
  /* Marque */
  --red:            #ED1C24;
  --red-dark:       #B8121A;
  --red-soft:       #FDECED;   /* fond très clair dérivé du rouge */
  --black:          #111111;
  --white:          #FFFFFF;

  /* Gris (échelle contrat) */
  --gray-100:       #F4F4F5;
  --gray-200:       #E4E4E7;
  --gray-500:       #71717A;
  --gray-700:       #3F3F46;

  /* États */
  --green:          #16A34A;
  --green-soft:     #E9F7EE;
  --wrong:          #DC2626;
  --wrong-soft:     #FDECEC;
  --amber:          #F59E0B;

  /* Surfaces claires (joueur / animateur / admin) */
  --bg:             var(--white);
  --surface:        var(--white);
  --surface-2:      var(--gray-100);
  --border:         var(--gray-200);
  --text:           var(--black);
  --text-muted:     var(--gray-500);

  /* Surfaces sombres (écran géant) */
  --dark-bg:        #0B0B0F;
  --dark-surface:   #16161D;
  --dark-border:    #2A2A35;
  --dark-text:      #FFFFFF;
  --dark-muted:     #A1A1AA;

  /* Typographie */
  --font-head:      'Outfit', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:        'Noto Kufi Arabic', 'Rubik', system-ui, sans-serif;

  --fs-xs:          0.8125rem;  /* 13px */
  --fs-sm:          0.9375rem;  /* 15px */
  --fs-md:          1.0625rem;  /* 17px */
  --fs-lg:          1.25rem;    /* 20px */
  --fs-xl:          1.5rem;     /* 24px */
  --fs-2xl:         2rem;       /* 32px */
  --fs-3xl:         2.75rem;    /* 44px */

  --lh-tight:       1.2;
  --lh-normal:      1.45;

  /* Espacements */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Rayons */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Ombres (légères : 2000 téléphones bas de gamme) */
  --shadow-sm: 0 1px 2px rgba(17,17,17,.08);
  --shadow-md: 0 2px 8px rgba(17,17,17,.10);

  /* Ergonomie tactile */
  --tap-min: 56px;

  /* Mouvement */
  --dur-fast: 120ms;
  --dur:      200ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);

  /* Avatar : 8 teintes déterministes (avatar.js les duplique en JS) */
  --avatar-1: #ED1C24;
  --avatar-2: #B8121A;
  --avatar-3: #C2410C;
  --avatar-4: #B45309;
  --avatar-5: #15803D;
  --avatar-6: #0F766E;
  --avatar-7: #1D4ED8;
  --avatar-8: #6D28D9;
}

/* -------------------------- Direction & langue ---------------------------- */
html[lang="ar"], [dir="rtl"] {
  --font-head: var(--font-ar);
  --font-body: var(--font-ar);
}

[dir="rtl"] { text-align: right; }
[dir="rtl"] .u-flip { transform: scaleX(-1); }

/* Les clés de réponse A/B/C/D et les nombres restent LTR même en arabe. */
.ltr, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; }
}