/*
 * BAM ! — Design tokens
 * ---------------------------------------------------------------
 * Direction artistique customR (octobre 2026) : « une foire vintage,
 * remise au goût du jour ». Bleu électrique en fond, touches pop de
 * jaune, cyan et rouge, trame façon écran LED, grain, typo massive,
 * cartouche blanc net.
 * Palette reprise de l'email Brevo « Save the date ».
 * C'est le seul fichier à modifier pour ajuster l'habillage.
 */

:root {
  /* Palette DA */
  --bam-blue: #2A31C4;          /* bleu électrique (fond) */
  --bam-blue-deep: #1F246F;     /* lignes de la trame */
  --bam-black: #111111;
  --bam-white: #FFFFFF;
  --bam-yellow: #F4DC5C;        /* boutons, étiquettes fortes */
  --bam-cyan: #6FE4D8;          /* intitulés sur fond noir */
  --bam-red: #E8473B;           /* touche pop : erreurs, accents ponctuels */

  /* Rôles */
  --color-bg: var(--bam-blue);
  --color-surface: var(--bam-white);
  --color-text: var(--bam-black);
  --color-text-muted: #4A4A4A;
  --color-text-on-dark: var(--bam-white);
  --color-border: var(--bam-black);
  --color-border-soft: #D9D9D9;
  --color-accent: var(--bam-yellow);
  --color-accent-text: var(--bam-black);
  --color-chip: var(--bam-black);
  --color-chip-text: var(--bam-white);
  --color-label-on-dark: var(--bam-cyan);
  --color-success: #1E7A4C;
  --color-error: var(--bam-red);
  --color-focus: var(--bam-yellow);
  --color-focus-on-light: var(--bam-blue);

  /* Typographies */
  --font-display: "Unbounded", "Arial Black", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-display: 800;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --text-hero: clamp(4.25rem, 1.5rem + 12vw, 10rem);
  --line-height-body: 1.6;
  --line-height-tight: 1.15;
  --letter-spacing-display: -0.02em;
  --letter-spacing-label: 0.08em;

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: 16px;
  --container: 1120px;

  /* Formes */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --border-width: 2px;
  --shadow-impact: 5px 5px 0 var(--bam-black);   /* ombre « BAM » des boutons et cartouches */
  --shadow-impact-hover: 7px 7px 0 var(--bam-black);

  /* Trame façon écran LED : points d'exclamation sombres sur le bleu (le « ! » de BAM!) */
  --trame-mark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='14'><path d='M1.6 1h4.8l-.9 7.2H2.5z' fill='%2312165a' fill-opacity='.55'/><rect x='2.4' y='10' width='3.2' height='3' fill='%2312165a' fill-opacity='.55'/></svg>");
  --trame-cell-w: 8px;
  --trame-cell-h: 14px;
  --grain-opacity: 0.16;

  /* Images : en couleur, les portraits sont déjà tramés */
  --image-filter: none;
  --logo-filter: grayscale(1);

  /* Animations */
  --transition: 150ms ease;
  --ease-impact: cubic-bezier(0.2, 1.5, 0.4, 1);   /* léger rebond, l'effet « BAM » */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-reveal: 650ms;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}