/* ═══════════════════════════════════════════════════════════
   BSF Design System — Tokens Canoniques v1.3
   Date: 2026-04-24 (+ --bsf-shared-* invariants family)
   Documentation: BSF_DESIGN_SYSTEM_CANONICAL_20260422.md
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════ */
  /* ════════════ LIGHT MODE ════════════════ */
  /* ═══════════════════════════════════════ */

  /* Brand — identité BSF (fixe, ne bouge pas entre instances client) */
  --bsf-brand-primary: #0C304C;       /* navy BSF, couleur principale */
  --bsf-brand-accent: #175F9E;        /* bleu BSF, accent interactif */

  /* Highlights — 3 accents chaleureux méditerranéens */
  --bsf-accent-mandarine: #E8762F;    /* CTAs principaux, énergie positive */
  --bsf-accent-soleil: #E6A728;       /* highlights, alertes positives, badges NEW */
  --bsf-accent-arbre: #2C7A52;        /* succès, validations, statuts online */

  /* Fonds */
  --bsf-bg-page: #ECEEF1;             /* fond de page global */
  --bsf-bg-surface: #F8F9FB;          /* fond cards, widgets, modales */
  --bsf-bg-elevated: #E3E7EC;         /* hover, dropdown, focus state */

  /* Shared widgets (INVARIANTS light/dark, cible Flutter natif) */
  /* Ces tokens n'ont PAS d'override [data-theme="dark"]. */
  /* Surchargeables via theme-<client>.css pour white-label. */
  --bsf-shared-bg:            #606060;                     /* fond widgets shared */
  --bsf-shared-brand:         #0C304C;                     /* navy identitaire fixe */
  --bsf-shared-brand-accent:  #175F9E;                     /* bleu accent fixe */
  --bsf-shared-mandarine:     #E8762F;                     /* CTA mandarine fixe */
  --bsf-shared-text:          #FFFFFF;                     /* texte invariant sur fonds shared */
  --bsf-shared-text-muted:    rgba(255, 255, 255, 0.75);   /* texte atténué sur fonds shared */

  /* Texte */
  --bsf-text-primary: #0C1821;        /* titres, texte principal */
  --bsf-text-secondary: #3A4A5C;      /* body, descriptions */
  --bsf-text-muted: #6B7A8D;          /* métadonnées, timestamps */

  /* Bordures & séparateurs */
  --bsf-border-default: #D8DEE5;      /* séparateurs subtils */
  --bsf-border-strong: #B9C4D0;       /* cards, inputs focus */

  /* États sémantiques */
  --bsf-success: #2C7A52;             /* = accent-arbre, validations */
  --bsf-warning: #E6A728;             /* = accent-soleil, alertes */
  --bsf-danger: #BD4540;              /* rouge brique sobre, PAS rouge vif */
  --bsf-info: #175F9E;                /* = brand-accent, info neutre */

  /* Typographie */
  --bsf-font-body:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --bsf-font-display: var(--bsf-font-body);
  --bsf-font-mono:
    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Hauteurs, espacements, radius (communs light/dark) */
  --bsf-topbar-h: 80px;
  --bsf-radius-sm: 6px;
  --bsf-radius-md: 8px;
  --bsf-radius-lg: 12px;
  --bsf-radius-xl: 16px;
  --bsf-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --bsf-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --bsf-shadow-lg: 0 10px 24px rgba(0,0,0,0.12);

  /* ═══════════════════════════════════════ */
  /* Typography scale (2026-04-23 -2px shift) */
  /* ═══════════════════════════════════════ */
  --bsf-text-xs:    9px;    /* ex 11px */
  --bsf-text-sm:    11px;   /* ex 13px */
  --bsf-text-base:  12px;   /* ex 14px */
  --bsf-text-md:    13px;   /* ex 15px */
  --bsf-text-lg:    15px;   /* ex 17px */
  --bsf-text-xl:    18px;   /* ex 20px */
  --bsf-text-2xl:   22px;   /* ex 24px */
  --bsf-text-3xl:   30px;   /* ex 32px */
  --bsf-text-4xl:   38px;   /* ex 40px */
  --bsf-text-lh-tight:   1.15;
  --bsf-text-lh-snug:    1.2;
  --bsf-text-lh-normal:  1.3;
  --bsf-text-lh-relaxed: 1.4;
  --bsf-text-lh-loose:   1.5;
}

html[data-theme="dark"] {
  /* ═══════════════════════════════════════ */
  /* ════════════ DARK MODE ═════════════════ */
  /* ═══════════════════════════════════════ */

  /* Brand éclairci pour lisibilité dark */
  --bsf-brand-primary: #4D9ED0;       /* bleu ciel */
  --bsf-brand-accent: #6FB3DC;

  /* Highlights plus vifs en dark pour contraste */
  --bsf-accent-mandarine: #E89660;
  --bsf-accent-soleil: #E6BE5C;
  --bsf-accent-arbre: #54A077;

  /* Fonds sombres profonds (Flashscore-style) */
  --bsf-bg-page: #0B1420;
  --bsf-bg-surface: #141E2D;
  --bsf-bg-elevated: #1D2A3D;

  /* Texte inversé */
  --bsf-text-primary: #F1F5F9;
  --bsf-text-secondary: #CBD5E1;
  --bsf-text-muted: #7B8A9E;

  /* Bordures dark */
  --bsf-border-default: #1D2A3D;
  --bsf-border-strong: #2C3E55;

  /* États dark */
  --bsf-success: #54A077;
  --bsf-warning: #E6BE5C;
  --bsf-danger: #D16662;
  --bsf-info: #6FB3DC;

  /* Shadows dark (plus subtiles) */
  --bsf-shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
  --bsf-shadow-md: 0 4px 12px rgba(0,0,0,0.32);
  --bsf-shadow-lg: 0 10px 24px rgba(0,0,0,0.48);
}