/* =========================================================
   BACHATA DISTRICT — Foundations
   Couleurs + Typographie + Espacement + Élévation
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&display=swap');

:root {
  /* Sable / cream */
  --sand-50:  #fbf8f1;
  --sand-100: #f5f1e8;
  --sand-200: #ece5d3;
  --sand-300: #ddd2b8;
  --sand-400: #b8a888;

  /* Encre / aubergine */
  --ink-50:   #6b5e6e;
  --ink-100:  #4a3e4d;
  --ink-200:  #332838;
  --ink-300:  #211726;
  --ink-400:  #14101c;
  --ink-night:#0e0a16;

  /* Spectrum red — accent principal */
  --coral-50:  #fbe6e3;
  --coral-100: #f5b3aa;
  --coral-200: #e85f4d;
  --coral-300: #cf1601;
  --coral-400: #a81100;
  --coral-500: #7d0d00;

  /* Ivory buff — accent secondaire */
  --sun-50:    #fcf8e8;
  --sun-100:   #f7ecb8;
  --sun-200:   #f0dc82;
  --sun-300:   #ccb651;
  --sun-400:   #8f7c2a;

  /* Aconite violet */
  --mauve-100: #e4d4fb;
  --mauve-200: #c19bf7;
  --mauve-300: #9c52f2;
  --mauve-400: #5f25a8;

  /* Rainette green */
  --leaf-100: #e5f0e9;
  --leaf-300: #6fa885;
  --leaf-400: #356b4d;

  /* Sémantique */
  --bg:           var(--sand-50);
  --surface:      var(--sand-100);
  --surface-2:    var(--sand-200);
  --surface-night:var(--ink-night);

  --fg:           var(--ink-300);
  --fg-strong:    var(--ink-400);
  --fg-muted:     var(--ink-100);
  --fg-subtle:    var(--ink-50);
  --fg-inverse:   var(--sand-50);

  --border:       color-mix(in oklab, var(--ink-400) 12%, transparent);
  --border-strong:color-mix(in oklab, var(--ink-400) 24%, transparent);
  --divider:      var(--sand-300);

  --primary:      var(--coral-300);
  --primary-hover:var(--coral-400);
  --primary-press:var(--coral-500);
  --primary-fg:   var(--sand-50);

  --accent:       var(--sun-200);
  --accent-hover: var(--sun-300);

  --night:        var(--ink-night);
  --night-fg:     var(--sand-50);

  --success:      var(--leaf-400);
  --danger:       var(--coral-500);
  --warning:      var(--sun-300);

  /* Typographie */
  --font-display: 'Lato', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lato', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  128px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.5;
  --leading-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.02em;
  --tracking-mono:  0.04em;
  --tracking-label: 0.14em;

  /* Espacement */
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px; --space-4:  16px;
  --space-5:  20px; --space-6:  24px; --space-8:  32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* Rayons */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Élévation — ombres chaudes, jamais grises */
  --shadow-xs: 0 1px 2px rgba(33, 23, 38, 0.06);
  --shadow-sm: 0 2px 6px rgba(33, 23, 38, 0.08), 0 1px 2px rgba(33, 23, 38, 0.04);
  --shadow-md: 0 8px 20px rgba(33, 23, 38, 0.10), 0 2px 6px rgba(33, 23, 38, 0.06);
  --shadow-lg: 0 18px 40px rgba(33, 23, 38, 0.14), 0 4px 12px rgba(33, 23, 38, 0.08);
  --shadow-coral: 0 8px 24px rgba(226, 108, 82, 0.32);

  --inset-warm: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(33, 23, 38, 0.04);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* Layout */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1360px;
  --gutter:       24px;
}

/* ---- Styles typographiques sémantiques ---- */

.h-display {
  font-family: var(--font-display); font-size: var(--text-6xl); font-style: italic;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--fg-strong); font-weight: 900;
}
.h1 {
  font-family: var(--font-display); font-size: var(--text-4xl);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--fg-strong); font-weight: 800;
}
.h2 {
  font-family: var(--font-display); font-size: var(--text-3xl);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-snug);
  color: var(--fg-strong); font-weight: 700;
}
.h3 {
  font-family: var(--font-body); font-size: var(--text-2xl);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-snug);
  color: var(--fg-strong); font-weight: 500;
}
.h4 { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-strong); font-weight: 500; }
.h5 { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg-strong); font-weight: 500; }
.lead { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg-muted); font-weight: 400; }
.p, .body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg); font-weight: 400; }
.small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--fg-muted); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted);
}
.mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-mono); color: var(--fg); }
.quote {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl);
  line-height: var(--leading-snug); color: var(--fg-strong); font-weight: 700;
}