/* ─────────────────────────────────────────────────────────────────────────
 * B2A — Design Tokens
 * Source unique. Importé à la fois par les templates Thymeleaf (SSR) et
 * par les bundles Vue (Vite). Aucun composant ne doit définir de couleur,
 * police ou espacement en dur ; toujours via une variable de ce fichier.
 *
 * Conventions :
 *   --<famille>-<rôle> ou --<famille>-<index>
 *   Couleurs : oklch quand harmonisation nécessaire, sinon hex.
 *   Espacements : base 4. space-1 = 4px, space-4 = 16px, etc.
 *
 * Fichier à versionner. Tout changement = revue design + tech.
 * ──────────────────────────────────────────────────────────────────────── */

:root {

  /* ── COULEURS · GLOBAL ─────────────────────────────────────────── */
  /* Marque */
  --violet:          #6B21A8;
  --violet-deep:     #581C87;
  --violet-deepest:  #2E1065;
  --violet-soft:     #C084FC;

  /* Neutres clairs (Direction A · Le Journal) */
  --paper:         #FAF8F4;   /* fond principal clair */
  --paper-2:       #FFFFFF;   /* surfaces (cartes, encarts) */
  --paper-3:       #F4F1E8;   /* fond subtilement teinté */
  --ink:           #0E0E10;   /* texte principal sur clair */
  --ink-2:         #3A3A3F;
  --ink-3:         #6B6B72;
  --rule:          #E2DED5;   /* filets clairs */
  --rule-strong:   #BDB7A8;

  /* Neutres sombres (Direction B · Court Side) */
  --night:         #0A0A0F;
  --night-2:       #131319;
  --night-3:       #1C1C24;
  --snow:          #FFFFFF;
  --snow-2:        #B8B8C0;
  --snow-3:        #6E6E78;
  --rule-night:        rgba(255, 255, 255, 0.10);
  --rule-night-strong: rgba(255, 255, 255, 0.22);

  /* Sémantiques (UI feedback) */
  --success:       #2D6A4F;
  --warning:       #B65B1F;
  --danger:        #B42318;
  --info:          var(--violet);

  /* Code couleur des catégories d'évènements de l'agenda (Incrément 7), un
     token par valeur de l'enum EventCategory. Token dédié plutôt que la
     réutilisation d'un token sémantique (--danger, --warning…) qui pourrait
     évoluer indépendamment. */
  --cat-competition:     #7C3AED; /* = --violet, réutilisé tel quel */
  --cat-interclubs:      #DC2626;
  --cat-vie-club:        #D97706;
  --cat-tournoi-interne: #059669;
  --cat-stage:           #2563EB;
  --cat-bureau:          #475569;
  --cat-communication:   #DB2777;

  /* Code couleur des classements FFBad (simple/double/mixte), par lettre
     initiale du niveau — décision client. Token dédié par lettre plutôt que
     la réutilisation d'un token sémantique (--danger, --success…) qui
     pourrait évoluer indépendamment, même logique que --cat-*. */
  --classement-n: #DC2626; /* National — rouge */
  --classement-r: #2563EB; /* Régional — bleu */
  --classement-d: #059669; /* Départemental — vert */
  --classement-p: #CA8A04; /* Promotion — jaune/or */


  /* ── TYPOGRAPHIE ───────────────────────────────────────────────── */
  --font-display:  'Barlow Condensed', 'Helvetica Neue', sans-serif; /* Direction A */
  --font-kinetic:  'Oswald', 'Helvetica Neue', sans-serif;           /* Direction B */
  --font-body:     'Inter', system-ui, sans-serif;                   /* Direction A */
  --font-body-alt: 'Barlow', system-ui, sans-serif;                  /* Direction B */
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Échelle de taille (en px, à utiliser directement) */
  --text-xs:       11px;
  --text-sm:       13px;
  --text-base:     14px;
  --text-md:       16px;
  --text-lg:       20px;
  --text-xl:       28px;
  --text-2xl:      40px;
  --text-3xl:      56px;
  --text-4xl:      72px;
  --text-5xl:      96px;
  --text-hero:     140px;

  /* Hauteurs de ligne et tracking */
  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --track-tight:   -0.02em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-wider:    0.08em;

  /* Poids */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;


  /* ── ESPACEMENT (base 4) ───────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;


  /* ── LAYOUT ────────────────────────────────────────────────────── */
  --container-max: 1440px;
  --container-pad: var(--space-20);
  --gutter:        var(--space-6);


  /* ── RAYONS ────────────────────────────────────────────────────── */
  /* L'identité B2A est anguleuse : 0 par défaut. Rayons réservés aux
     éléments naturellement ronds (pill, avatar, badge). */
  --radius-none:  0;
  --radius-pill:  999px;
  --radius-full:  50%;


  /* ── MOUVEMENT ─────────────────────────────────────────────────── */
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  400ms;
  --duration-emph:  600ms;
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1);
  --easing-decel:    cubic-bezier(0.0, 0.0, 0.2, 1);


  /* ── ÉLÉVATION ─────────────────────────────────────────────────── */
  /* Ombres légères, l'identité graphique privilégie la planéité. */
  --shadow-1: 0 1px 2px rgba(14, 14, 16, 0.04), 0 1px 1px rgba(14, 14, 16, 0.03);
  --shadow-2: 0 4px 12px rgba(14, 14, 16, 0.06), 0 1px 2px rgba(14, 14, 16, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 14, 16, 0.10), 0 2px 6px rgba(14, 14, 16, 0.05);


  /* ── DIVERS ────────────────────────────────────────────────────── */
  --motifs:        1;    /* Intensité des motifs badminton : 0 / 0.35 / 1 */
  --focus-ring:    2px solid var(--violet);
  --focus-offset:  2px;
}


/* ─────────────────────────────────────────────────────────────────────
 * Reset minimal + bases globales
 * ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}


/* ─────────────────────────────────────────────────────────────────────
 * Classes utilitaires de typographie (utilisables côté Thymeleaf et Vue)
 * ──────────────────────────────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
  line-height: 0.9;
  text-transform: uppercase;
}

.t-kinetic {
  font-family: var(--font-kinetic);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-normal);
  line-height: 0.95;
  text-transform: uppercase;
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-feature-settings: "tnum";
}

.t-accent {
  font-weight: var(--weight-bold);
  color: var(--violet);
}


/* ─────────────────────────────────────────────────────────────────────
 * Thèmes — appliquer .theme-a ou .theme-b sur un conteneur racine pour
 * basculer entre Direction A (clair) et Direction B (sombre).
 * ──────────────────────────────────────────────────────────────────── */
.theme-a {
  --bg:          var(--paper);
  --bg-2:        var(--paper-2);
  --fg:          var(--ink);
  --fg-2:        var(--ink-2);
  --fg-3:        var(--ink-3);
  --line:        var(--rule);
  --line-strong: var(--rule-strong);
  background: var(--bg);
  color: var(--fg);
}

.theme-b {
  --bg:          var(--night);
  --bg-2:        var(--night-2);
  --fg:          var(--snow);
  --fg-2:        var(--snow-2);
  --fg-3:        var(--snow-3);
  --line:        var(--rule-night);
  --line-strong: var(--rule-night-strong);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body-alt);
}