/* =====================================================================
   Pétanque Manager — tokens.css
   Source de vérité des couleurs, de la typo, des rayons, des ombres.
   À inclure en premier, avant components.css. Aucune règle de mise en page ici.
   ===================================================================== */
/* Inter variable (400–800, licence OFL), déjà servie par le site : sous-ensembles
   latin et latin étendu, découpés par unicode-range (DECISIONS_SITE_STOP_A § 1).
   font-display: optional (STOP C bis) : la police n'est prise que si elle arrive tout de suite —
   les deux @font-face sont dans includes/head.php, aux adresses versionnées (cache d'un an) ; le latin y est préchargé ; le latin étendu n'est demandé que si la page
   en contient un caractère (unicode-range). Sinon le texte reste en police système, sans second
   rendu qui retarderait le LCP. */

/* ==========================================================
   TOKENS — base statique : Bevel (styles.refero.design)
   Emprunts Stripe : grille structurée du hero, dégradé de hero
   (technique Stripe, couleurs Bevel), élévation par ombre douce.
   ========================================================== */
:root{
  /* ---- Palette de marque Pétanque Manager — valeurs exactes du tailwind.config du site ---- */
  --gold-300:#E8C27A;   /* brand.light   */
  --gold-500:#D4A24C;   /* brand.DEFAULT */
  --gold-700:#9E6314;   /* brand.dark    */
  --navy-900:#031D38;   /* dark.bg       */
  --navy-700:#042C53;   /* dark.card     */
  --navy-500:#1B4A7A;   /* dark.border   */

  /* ---- Thème clair (par défaut) ---- */
  --paper:#ffffff;
  --surface:#ffffff;
  --ink:var(--navy-900);
  --muted:#5e6b7a;
  --accent:var(--navy-500);          /* liens, focus, coches, données */
  --accent-deep:var(--navy-900);
  --gold:var(--gold-500);            /* mise en valeur : un seul élément par écran */
  --rule:var(--gold-700);            /* filet du pilier actif : 3:1 au moins sur le fond (WCAG 1.4.11) */
  --gold-fg:var(--navy-900);
  --btn-bg:var(--navy-700);--btn-fg:#ffffff;--btn-bg-hover:var(--navy-900);
  --band:var(--navy-900);            /* bandeau final */
  --phone-frame:#0a1627;
  --screen-bg:#f3f6fa;
  --green:#31ce01;
  /* Septième code, hors palette de marque : les états d'erreur seulement (contact.php), décidé au STOP D4.
     Contraste ≥ 5,7:1 sur les fonds clairs, ≥ 5,1:1 sur les fonds sombres. */
  --danger:#B42318;
  /* Feuille de docs.php : blanche dans les deux thèmes, ses couleurs en ligne la supposent (R7) */
  --sheet:#ffffff;--sheet-ink:var(--navy-900);
  --win-bg:rgba(49,206,1,.16);--win-fg:#1f7a08;
  --loss-bg:rgba(232,194,122,.35);--loss-fg:#8a4a16;
  /* Teintes dérivées — valeurs de repli, recalculées plus bas via color-mix() */
  --accent-soft:#e3eaf2;
  --cloud:#ecf0f5;
  --sky:#d5dee8;
  --warm:#f9eedb;
  --blob-blue:#9bafc3;
  --blob-yellow:#f1dcb3;
  --glow:rgba(212,162,76,.45);
  --hairline:rgba(3,29,56,.10);
  --nav-bg:rgba(255,255,255,.82);
  /* Mode application (pages outils : direct, club, administration ; DESIGN.md § Mode application).
     Lus dehors, au soleil : tout texte à 7:1 au moins sur --paper. Dérivés de la palette,
     valeurs de repli ici, recalculées plus bas via color-mix(). */
  --app-muted:#304661;   /* navy-900 82 % : 9,8:1 sur blanc (--muted ne donne que 5,4) */
  --app-win:#156422;     /* vert 40 % dans navy-900 : 7,3:1 */
  --app-loss:#704e1f;    /* gold-700 70 % dans navy-900 : 7,5:1 */
  --app-danger:#7f2122;  /* danger 70 % dans navy-900 : 9,8:1 */

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --max:1120px;
  --gap:clamp(64px,9vw,112px);
  --r-card:24px;
  --r-field:32px;
  --r-pill:128px;

  --shadow-img:rgba(0,0,0,.25) 0 0 16px -8px;
  --shadow-card:rgba(0,0,0,.15) 0 2px 16px 0;
  --shadow-hover:0 18px 40px -18px rgba(3,29,56,.28),0 2px 6px rgba(3,29,56,.06);
  --ease:cubic-bezier(.2,.7,.2,1);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
/* Toutes les teintes découlent de la palette : changer les six codes ci-dessus recolore tout le site. */
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --accent-soft:color-mix(in srgb,var(--navy-500) 11%,white);
    --cloud:color-mix(in srgb,var(--navy-700) 7%,white);
    --sky:color-mix(in srgb,var(--navy-500) 18%,white);
    --warm:color-mix(in srgb,var(--gold-300) 32%,white);
    --blob-blue:color-mix(in srgb,var(--navy-500) 42%,white);
    --blob-yellow:color-mix(in srgb,var(--gold-300) 68%,white);
    --glow:color-mix(in srgb,var(--gold-500) 45%,transparent);
    --hairline:color-mix(in srgb,var(--navy-900) 10%,transparent);
    --app-muted:color-mix(in srgb,var(--navy-900) 82%,white);
    --app-win:color-mix(in srgb,var(--green) 40%,var(--navy-900));
    --app-loss:color-mix(in srgb,var(--gold-700) 70%,var(--navy-900));
    --app-danger:color-mix(in srgb,var(--danger) 70%,var(--navy-900));
  }
}

/* ---- Thème sombre (par défaut) : les tokens dark.* du site (bg, card, border), l'or devient l'accent ---- */
:root[data-theme="dark"]{
    color-scheme:dark;
    --paper:var(--navy-900);
    --surface:#0b3a66;
    --ink:#f3f6fb;
    --muted:#a9b8cb;
    --accent:var(--gold-300);
    --accent-deep:var(--gold-500);
    --accent-soft:rgba(232,194,122,.14);
    --gold:var(--gold-500);
    --rule:var(--gold-500);
    --gold-fg:var(--navy-900);
    --btn-bg:var(--gold-500);--btn-fg:var(--navy-900);--btn-bg-hover:var(--gold-300);
    --band:var(--navy-700);
    --screen-bg:#071f3a;
    --win-bg:rgba(49,206,1,.2);--win-fg:#9df08b;
    --loss-bg:rgba(232,194,122,.2);--loss-fg:#f0cf93;
    --cloud:var(--navy-700);
    --sky:#0b3a66;
    --warm:#0d2b49;
    --blob-blue:var(--navy-500);
    --blob-yellow:var(--gold-700);
    --glow:rgba(212,162,76,.35);
    --hairline:rgba(27,74,122,.55);
    --nav-bg:rgba(4,44,83,.82);
    --danger:#FF8A80;
    /* Mode application : sur --paper (navy-900), muted 8,4:1, victoire 12,4, défaite 11,4, erreur 7,4 */
    --app-muted:var(--muted);--app-win:var(--win-fg);--app-loss:var(--loss-fg);--app-danger:var(--danger);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:var(--navy-900);
    --surface:#0b3a66;
    --ink:#f3f6fb;
    --muted:#a9b8cb;
    --accent:var(--gold-300);
    --accent-deep:var(--gold-500);
    --accent-soft:rgba(232,194,122,.14);
    --gold:var(--gold-500);
    --rule:var(--gold-500);
    --gold-fg:var(--navy-900);
    --btn-bg:var(--gold-500);--btn-fg:var(--navy-900);--btn-bg-hover:var(--gold-300);
    --band:var(--navy-700);
    --screen-bg:#071f3a;
    --win-bg:rgba(49,206,1,.2);--win-fg:#9df08b;
    --loss-bg:rgba(232,194,122,.2);--loss-fg:#f0cf93;
    --cloud:var(--navy-700);
    --sky:#0b3a66;
    --warm:#0d2b49;
    --blob-blue:var(--navy-500);
    --blob-yellow:var(--gold-700);
    --glow:rgba(212,162,76,.35);
    --hairline:rgba(27,74,122,.55);
    --nav-bg:rgba(4,44,83,.82);
    --danger:#FF8A80;
    /* Mode application : sur --paper (navy-900), muted 8,4:1, victoire 12,4, défaite 11,4, erreur 7,4 */
    --app-muted:var(--muted);--app-win:var(--win-fg);--app-loss:var(--loss-fg);--app-danger:var(--danger);
  }
}