/* ============================================================
   ABCD Badminton - Design Tokens
   Fonts loaded via <link> in head.php
   ============================================================ */
/* ============================================================
   ABCD Badminton - Design Tokens
   ============================================================
   Couleurs, typographie, espacements, ombres, radii.
   Importer dans tous les fichiers via :
   <link rel="stylesheet" href="../colors_and_type.css">
   ============================================================ */


:root {
  /* ---------- Couleurs bordeaux (signature) ---------- */
  --bordeaux-primary: #6B1F2E;
  --bordeaux-deep:    #4A1520;
  --bordeaux-soft:    #8B3242;
  --bordeaux-tint:    #F4E6E8; /* fond très clair teinté bordeaux */

  /* ---------- Neutres chauds ---------- */
  --white:    #FFFFFF;
  --ivory:    #F5EFE0;        /* signature, fond chaleureux */
  --cream:    #FBF7EE;        /* hover de l'ivoire */
  --warm-50:  #F8F5F2;
  --warm-100: #EFEAE3;
  --warm-200: #E8E2DA;
  --warm-300: #D4CCC0;
  --warm-400: #9A8F87;
  --warm-500: #6E6359;
  --warm-700: #3D3530;
  --ink:      #2A1F1F;        /* presque-noir teinté bordeaux */

  /* ---------- Accent or ---------- */
  --gold:        #D4A437;
  --gold-deep:   #B08826;
  --gold-tint:   #FDF4D9;

  /* ---------- Sémantique ---------- */
  --success:  #2D6A4F;
  --warning:  #C9722B;
  --error:    #B23A48;

  /* ---------- Tokens sémantiques foreground / background ---------- */
  --fg-1: var(--ink);          /* texte principal */
  --fg-2: var(--warm-500);     /* texte secondaire */
  --fg-3: var(--warm-400);     /* texte tertiaire / placeholder */
  --fg-onbordeaux: var(--white);
  --fg-link: var(--bordeaux-primary);

  --bg-1: var(--white);        /* surface principale */
  --bg-2: var(--ivory);        /* surface chaleureuse */
  --bg-3: var(--warm-50);      /* surface subtile */
  --bg-bordeaux: var(--bordeaux-primary);

  --border-1: var(--warm-200);
  --border-2: var(--warm-300);
  --border-strong: var(--bordeaux-primary);

  /* ---------- Typographie ---------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;

  /* ---------- Espacement (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Ombres (teintées bordeaux) ---------- */
  --shadow-xs:     0 1px 2px rgba(74, 21, 32, 0.06);
  --shadow-card:   0 1px 2px rgba(74, 21, 32, 0.06), 0 4px 12px rgba(74, 21, 32, 0.04);
  --shadow-lifted: 0 8px 24px rgba(74, 21, 32, 0.10), 0 2px 4px rgba(74, 21, 32, 0.06);
  --shadow-modal:  0 24px 48px rgba(74, 21, 32, 0.18), 0 8px 16px rgba(74, 21, 32, 0.08);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --header-height: 72px;
  --section-py:    96px;

  /* ---------- Easing ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-std:  240ms;
  --dur-slow: 400ms;
}

/* ============================================================
   Reset minimal + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

img, svg, video { max-width: 100%; }

html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Styles typographiques sémantiques
   ============================================================ */

.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-48));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bordeaux-primary);
}

p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}

.p-lead {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}

.small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.micro {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  color: var(--fg-2);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ============================================================
   Helpers
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-7); }
}