/* Déclarations de variables uniquement : chargeable partout sans rien restyler.
   Se charge avant style.css, dont --red, --r-lg et --r-xl doivent l'emporter.
   tests/structural/jetons-par-vue.spec.ts vérifie que chaque jeton lu est déclaré. */
:root {
	/* Feu du ballon de série (M_FlameBall) : la palette n'a aucune teinte chaude, une flamme
	   réaliste en demande. Identiques dans les deux thèmes ; aucun ne reprend une couleur de club. */
	--flame-yellow-core: #ffffe6;
	--flame-yellow-mid: #ffec3d;
	--flame-yellow-outer: #d9c400;
	--flame-blue-core: #e6f6ff;
	--flame-blue-mid: #2fa8ff;
	--flame-blue-outer: #1b3fd1;
	--flame-violet-core: #f6e8ff;
	--flame-violet-mid: #b45cff;
	--flame-violet-outer: #5a14c8;
	--flame-gold-core: #fff8dc;
	--flame-gold-mid: #ffc933;
	--flame-gold-outer: #b8860b;
	--flame-dark-core: #000000;
	--flame-dark-mid: #05080a;
	--flame-dark-outer: #02140a;
	--flame-dark-glint: #00e87a;
	--flame-gold-glint: #fff2b0;
	--flame-bolt-core: #dbeaff;
	--flame-bolt-mid: #8fb8ff;
	--flame-bolt-outer: #3c5bd6;

	--bg-base: #080808;
	--bg-surface: #121212;
	--bg-elevated: #1c1c1c;
	--bg-overlay: #262626;

	--bg-mesh: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(204, 255, 0, 0.03) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 80% 100%, rgba(0, 232, 122, 0.02) 0%, transparent 50%);

	/* Fond clair invariant de l'avatar par défaut (PNG transparent). Aussi déclaré dans style.css :
	   la barre applicative est rendue sur les deux jeux de jetons. */
	--avatar-bg: #ffffff;
	/* --avatar-size : avatar qui accompagne une ligne de texte ; --avatar-size-lg : surfaces où
	   le joueur se regarde (barre, auteur de tifo, profil, vestiaire, avant-match, compte). */
	--avatar-size: 44px;
	--avatar-size-lg: 50px;

	--yellow: #ccff00;
	--yellow-dim: rgba(204, 255, 0, 0.1);
	--yellow-glow: rgba(204, 255, 0, 0.18);
	--yellow-border: rgba(204, 255, 0, 0.25);

	--brand: var(--yellow);
	--brand-dim: var(--yellow-dim);
	--brand-border: var(--yellow-border);

	--green: #00e87a;
	--green-dim: rgba(0, 232, 122, 0.1);
	--green-border: rgba(0, 232, 122, 0.25);

	--text-100: #f0f0ec;
	--text-60: #908e86;
	--text-30: #86847c; /* AA : 4,5:1 minimum jusque sur --bg-elevated */

	--border-subtle: rgba(255, 255, 255, 0.09);
	--border-default: rgba(255, 255, 255, 0.14);
	--border-active: var(--yellow-border);

	--color-error: #ff5c5c;
	--color-error-dim: rgba(255, 92, 92, 0.15);
	--color-error-border: rgba(255, 92, 92, 0.25);
	--color-warning: var(--yellow);

	/* Jetons sémantiques jaunes dans les deux thèmes : --yellow est la marque, verte en clair. */
	--alert-amber: #f2c31d;
	--alert-amber-dim: rgba(242, 195, 29, 0.1);
	--alert-amber-border: rgba(242, 195, 29, 0.32);
	--color-success: var(--green);

	--card-yellow: #eab308;

	--canvas-grid: rgba(255, 255, 255, 0.06);
	--canvas-text: rgba(255, 255, 255, 0.4);

	--font-display: "Barlow Condensed", sans-serif;
	--font-body: "DM Sans", sans-serif;
	/* Police couleur imposée : en rendu texte, le ballon ressemble au globe de la visibilité publique. */
	--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

	/* Aussi déclarée dans style.css, à l'identique. --fs-xs : micro-libellés seulement ;
	   --fs-sm : plancher de tout texte lu pour lui-même. */
	--fs-xs: 0.75rem;   /* 12px */
	--fs-sm: 0.875rem;  /* 14px */
	--fs-md: 1rem;      /* 16px */
	--fs-lg: 1.25rem;   /* 20px */
	--fs-xl: 1.5rem;    /* 24px */
	--fs-2xl: 2rem;     /* 32px */

	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 14px;

	--t-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
	--t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
	--t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);

	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
	--shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
	--shadow-yellow: 0 0 32px rgba(204, 255, 0, 0.15), 0 0 80px rgba(204, 255, 0, 0.05);

	--reaction-red: #ff4444;
	--reaction-solidarity: #4488ff;
	--reaction-heart: #ff6b9d;
	--reaction-applause: #ffaa00;

	--tifo-card-bg: var(--bg-surface);
	--mention-color: #7cb3ff;

	/* Encre de bulle envoyée par thème : --yellow change de teinte, le contraste AA aussi. */
	--msg-sent-bg: var(--yellow);
	--msg-sent-fg: #0a1400;
	--msg-sent-fg-muted: #33450d;

	--bg-card: #1e1e1e;
	/* Niveau propre (et non --bg-elevated) : fond des éléments posés sur un panneau. */
	--bg-inset: #2b2b2b;
	--text-primary: var(--text-100);
	--radius-sm: var(--r-sm);
	--radius-md: var(--r-md);
	--radius-lg: var(--r-lg);
	--radius-full: 100px;

	/* Barre applicative collante, encoche comprise : tout autre élément collant s'y cale. */
	--nav-height: calc(60px + env(safe-area-inset-top, 0px));

	/* Réserve basse, zone sûre comprise (ne pas rajouter env(safe-area-inset-bottom)) ;
	   CP_BottomNav.css la relève sous 860 px. */
	--bottom-nav-height: env(safe-area-inset-bottom, 0px);

	/* Marge haute + barre d'action + marge basse au-dessus des colonnes de la tribune. */
	--tribunes-chrome: 7rem;

	/* Pages applicatives ; les pages de lecture (aide) restent plus étroites. */
	--page-max: 1360px;
	--space-xs: 0.35rem;
	--space-sm: 0.6rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--border-card: rgba(204, 255, 0, 0.25);
	--border-card-gradient: linear-gradient(135deg, rgba(204, 255, 0, 0.08), rgba(204, 255, 0, 0.5));
	--text-muted: #86847c;
}

[data-theme="light"] {
	/* Feu du ballon de série (M_FlameBall) : la palette n'a aucune teinte chaude, une flamme
	   réaliste en demande. Identiques dans les deux thèmes ; aucun ne reprend une couleur de club. */
	--flame-yellow-core: #ffffe6;
	--flame-yellow-mid: #ffec3d;
	--flame-yellow-outer: #d9c400;
	--flame-blue-core: #e6f6ff;
	--flame-blue-mid: #2fa8ff;
	--flame-blue-outer: #1b3fd1;
	--flame-violet-core: #f6e8ff;
	--flame-violet-mid: #b45cff;
	--flame-violet-outer: #5a14c8;
	--flame-gold-core: #fff8dc;
	--flame-gold-mid: #ffc933;
	--flame-gold-outer: #b8860b;
	--flame-dark-core: #000000;
	--flame-dark-mid: #05080a;
	--flame-dark-outer: #02140a;
	--flame-dark-glint: #00e87a;
	--flame-gold-glint: #fff2b0;
	--flame-bolt-core: #dbeaff;
	--flame-bolt-mid: #8fb8ff;
	--flame-bolt-outer: #3c5bd6;

	--bg-base: #fcfffc;
	--bg-surface: #ffffff;
	--bg-elevated: #f6fef7;
	--bg-overlay: #e8f8ea;

	--bg-mesh: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(73, 193, 79, 0.06) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 100%, rgba(174, 255, 0, 0.04) 0%, transparent 50%);

	--yellow: #49c14f;
	--yellow-dim: rgba(73, 193, 79, 0.1);
	--yellow-glow: rgba(73, 193, 79, 0.18);
	--yellow-border: rgba(174, 255, 0, 0.35);

	--green: #2da635;
	--green-dim: rgba(45, 166, 53, 0.1);
	--green-border: rgba(45, 166, 53, 0.25);

	--text-100: #0c1a0d;
	--text-60: #3a5e3c;
	--text-30: #587a5a; /* AA : 4,5:1 minimum jusque sur --bg-elevated */

	--border-subtle: rgba(73, 193, 79, 0.12);
	--border-default: rgba(73, 193, 79, 0.2);
	--border-active: rgba(174, 255, 0, 0.45);

	--color-error: #d63031;
	--color-error-dim: rgba(214, 48, 49, 0.1);
	--color-error-border: rgba(214, 48, 49, 0.2);
	--color-warning: #e67e22;

	/* Assombris pour le contraste sur fond clair. */
	--alert-amber: #a16207;
	--alert-amber-dim: rgba(161, 98, 7, 0.1);
	--alert-amber-border: rgba(161, 98, 7, 0.28);
	--color-success: var(--green);

	--card-yellow: #d4a017;

	--canvas-grid: rgba(0, 0, 0, 0.08);
	--canvas-text: rgba(0, 0, 0, 0.45);

	--shadow-card: 0 2px 12px rgba(73, 193, 79, 0.08), 0 0 0 1px rgba(73, 193, 79, 0.06);
	--shadow-elevated: 0 8px 32px rgba(73, 193, 79, 0.12), 0 0 0 1px rgba(73, 193, 79, 0.08);
	--shadow-yellow: 0 0 24px rgba(174, 255, 0, 0.2), 0 0 60px rgba(174, 255, 0, 0.06);

	--reaction-red: #d63031;
	--reaction-solidarity: #2d7be5;
	--reaction-heart: #e84393;
	--reaction-applause: #e67e22;

	--tifo-card-bg: var(--bg-surface);
	--mention-color: #2d7be5;

	--msg-sent-bg: var(--yellow);
	--msg-sent-fg: #04220a;
	--msg-sent-fg-muted: #0b3813;

	--bg-card: var(--bg-surface);
	/* Plus sombre que le panneau : il est déjà presque blanc. */
	--bg-inset: #d6e6d9;
	--text-primary: var(--text-100);
	--text-muted: var(--text-30);
	--border-card: rgba(73, 193, 79, 0.42);
	--border-card-gradient: linear-gradient(135deg, rgba(73, 193, 79, 0.25), rgba(45, 166, 53, 0.15));
	--border-card-hover: rgba(73, 193, 79, 0.62);
}

/* Famille « marque », reprise du site public (rules_UI). */

:root {
  --bg: #05070c;
  --bg2: #080b12;
  --panel: #0c111b;

  --lime: #ccff00;
  --emerald: #00e87a;
  --red: #ff5c86;
  --grad: linear-gradient(110deg, #ccff00, #00e87a);
  /* Encre posée sur le dégradé d'accent, identique dans les deux thèmes. */
  --on-grad: #04140a;
  --grad-soft: linear-gradient(110deg, rgba(204, 255, 0, .18), rgba(0, 232, 122, .14));

  /* Pastilles d'entité, sans lien avec les couleurs des clubs (rules_marques_tierces) : miroir de
     api-sportmonks src/visual-identity/palette.ts. OKLCH L 0.76 C 0.145 tous les 30°, lisibles
     sous une encre sombre dans les deux thèmes. */
  --marker-01: #5fcb83;
  --marker-02: #00ceb9;
  --marker-03: #00c8e7;
  --marker-04: #4fbbff;
  --marker-05: #92aaff;
  --marker-06: #c399fd;
  --marker-07: #e68dd9;
  --marker-08: #fb87a9;
  --marker-09: #ff8c75;
  --marker-10: #f19a42;
  --marker-11: #d2ad28;
  --marker-12: #a1bf4d;
  --marker-ink: #08130d;

  --ink: #f3f7fb;
  --muted: #9aa6bd;
  --faint: #5c6780;

  --glass: rgba(255, 255, 255, .045);
  --glass-brd: rgba(255, 255, 255, .10);
  /* Distinct de --glass : un élément ne survole jamais dans la couleur de son conteneur. */
  --surface-hover: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .08);
  --shadow: 0 30px 80px rgba(0, 0, 0, .5);
  --glow: 0 0 50px rgba(25, 240, 166, .28);
  --topbar-bg: rgba(6, 9, 15, .55);
  --halo: rgba(0, 232, 122, .15);
  /* Voiles plein écran sombres dans les deux thèmes. */
  --scrim: rgba(2, 6, 12, .62);
  --scrim-base: #000000;

  --scroll-thumb: rgba(255, 255, 255, .16);
  --scroll-thumb-hover: var(--emerald);

  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --pill: 100px;

  --disp: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 220ms;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap: 18px;
  --gap-lg: 28px;
}

:root[data-theme="light"] {
  --bg: #eef3f0;
  --bg2: #f6faf7;
  --panel: #ffffff;
  --lime: #49c14f;
  --emerald: #2da635;
  --red: #e13a63;
  --grad: linear-gradient(110deg, #49c14f, #2da635);
  --grad-soft: linear-gradient(110deg, rgba(73, 193, 79, .16), rgba(45, 166, 53, .12));
  --ink: #08130d;
  --muted: #4a5a55;
  --faint: #8496a0;
  --glass: rgba(255, 255, 255, .7);
  --glass-brd: rgba(10, 40, 30, .10);
  --surface-hover: rgba(10, 40, 30, .06);
  /* Identique au thème sombre mais redéclaré : exigé par jetons-declares.test.js. */
  --avatar-bg: #ffffff;
  --line: rgba(10, 40, 30, .12);
  --shadow: 0 24px 60px rgba(20, 70, 50, .14);
  --glow: 0 0 44px rgba(8, 168, 119, .2);
  --topbar-bg: rgba(246, 250, 247, .7);
  --halo: rgba(45, 166, 53, .13);
  --scrim: rgba(8, 19, 13, .5);
  --scrim-base: #000000;
  --scroll-thumb: rgba(10, 40, 30, .22);
}

/* Célébrations plein écran : toujours sombres, indépendantes du thème. */
:root {
  --celebration-bg: #080808;
  --celebration-surface: #121212;
  --celebration-elevated: #1c1c1c;
  --celebration-ink: #f0f0ec;
  --celebration-ink-60: #908e86;
  --celebration-ink-30: #4a4944;
  --celebration-line: rgba(255, 255, 255, 0.09);
  --celebration-line-strong: rgba(255, 255, 255, 0.14);
}

/* Teinte du ballon de phase sous un pseudonyme ; repères du produit, jamais d'un club. */
:root {
  --phase-common: #9aa6bd;
  --phase-bronze: #cd7f32;
  --phase-silver: #c0c0c0;
  --phase-gold: #ffd700;
  --phase-obsidian: #8b84b8;
  --phase-platinum: #e5e4e2;
}

/* Fond clair : argent, or et platine passent sous le contraste minimal d'un graphisme (3:1). */
:root[data-theme="light"] {
  --phase-common: #6b7a86;
  --phase-bronze: #a35f1f;
  --phase-silver: #7a7f87;
  --phase-gold: #9a7400;
  --phase-obsidian: #2b2840;
  --phase-platinum: #6f7e8a;
}

/* Appoint de lisibilité des composants service-switcher : neutre ici, faute de la passe globale
   de pronolulu (a { font-size: calc(1em + 1px) }). */
:root {
  --ss-appoint-taille: 0px;
  --ss-appoint-interlettrage: normal;
  --ss-appoint-interlettrage-majuscules: 0.04em;
}

/* Grand écran : les pages applicatives s'élargissent, les pages de lecture gardent leur mesure. */
@media (min-width: 1920px) {
	:root {
		--page-max: 1680px;
	}
}