/**
 * FC Sochaux-Montbéliard — Design Tokens v1.0
 * Plateforme StratOS Stadium
 * Développé par C'est qui Maurice ? — https://cestquimaurice.com
 *
 * Usage CDN :
 *   <link rel="stylesheet" href="https://fcsmx42.cestquimaurice.com/design-system/fcsm-tokens.css">
 * Ou en CSS :
 *   @import url('https://fcsmx42.cestquimaurice.com/design-system/fcsm-tokens.css');
 */

:root {

  /* ── Couleurs primaires ────────────────────────────── */
  --fcsm-yellow:  #FEE300;
  --fcsm-blue:    #133478;
  --fcsm-dark:    #08080A;
  --fcsm-light:   #F5F3EE;

  /* ── Arrière-plans (dark mode par défaut) ──────────── */
  --bg-base:      #08080A;
  --bg-surface:   #111115;
  --bg-elevated:  #1A1A20;

  /* ── Texte ─────────────────────────────────────────── */
  --text-primary: #F5F3EE;
  --text-muted:   rgba(245, 243, 238, 0.60);
  --text-faint:   rgba(245, 243, 238, 0.35);

  /* ── Bordures ──────────────────────────────────────── */
  --border-subtle-th: 1px solid rgba(245, 243, 238, 0.08);
  --border-mid-th:    1px solid rgba(245, 243, 238, 0.16);
  --border-strong-th: 1px solid rgba(245, 243, 238, 0.28);

  /* ── Typographies ──────────────────────────────────── */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-script:  'Mr Dafoe', cursive;

  /* ── Échelle typographique ─────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  96px;

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

  /* ── Border radius ─────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Transitions ───────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;

  /* ── Z-index ───────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* ── Grille & layout ───────────────────────────────── */
  --grid-cols-mobile:   4;
  --grid-cols-tablet:   8;
  --grid-cols-desktop: 12;
  --gutter-mobile:  16px;
  --gutter-tablet:  24px;
  --gutter-desktop: 24px;
  --page-margin-mobile:  16px;
  --page-margin-tablet:  32px;
  --page-margin-desktop: 48px;
  --page-max-width: 1440px;

}

/* ── Breakpoints (usage en commentaire pour CSS-in-JS) ─
   xs:  375px  — mobile
   sm:  768px  — tablette
   md:  1280px — desktop
   lg:  1440px — wide
─────────────────────────────────────────────────────── */