/* ============================================================
   ACHAT — Alliance des corporations d'habitations abordables
   du territoire du Québec
   Foundations: colors, typography, motion, radii, shadows.
   Imported into every kit/slide; safe to import anywhere.
   ============================================================ */

/* ---------- Webfonts ----------------------------------------
   ACHAT runs a 5-family system; sources reconcile two briefs:

   From the original moodboard PDF ("Polices utilisées"):
   - Montserrat           → titres / display headings
   - Inter                → corps / body & UI

   From the palette spreadsheet ("Polices qui fonctionnent"):
   - Bricolage Grotesque  → alt display (more humanist, warmer)
   - Quicksand            → alt UI / body (rounder, friendlier)
   - Playfair Display     → editorial accent (quotes, longform)

   Both sets are kept first-class. Pick ONE display + ONE body
   per surface and stay consistent within that surface:
   • Default product UI   → Montserrat + Inter   (moodboard pair)
   • Warmer marketing     → Bricolage + Quicksand (spreadsheet pair)
   • Editorial / op-ed    → Playfair Display italic for quotes only
------------------------------------------------------------- */

:root {
  /* ============ BRAND COLORS (from palette spreadsheet) ============
     5 brand hues + their "pâle" variants + a soft sky-blue accent.
     Names match the spreadsheet so designers can speak in French
     ("jaune pâle", "vert", "prune") and find the same token here. */

  /* Jaune — primary brand color, the pin's signature warm yellow */
  --achat-jaune:        #FFD32E;
  --achat-jaune-pale:   #FFEFB5;

  /* Orange — secondary, completes the gradient with jaune */
  --achat-orange:       #EF7C26;
  --achat-orange-pale:  #F8C59E;

  /* Vert — community / growth, used sparingly */
  --achat-vert:         #698762;
  --achat-vert-pale:    #AFE3A3;

  /* Prune — warm brown, grounds the warm palette */
  --achat-prune:        #6F5A51;
  --achat-prune-pale:   #A3928B;

  /* Gris — neutral text + chrome */
  --achat-gris:         #565556;
  --achat-gris-pale:    #9C989C;

  /* Bleu — soft sky accent, only one and no pâle variant */
  --achat-bleu:         #B9E0F6;

  /* Signature gradient — used in the official "logo dégradé".
     Top is the jaune, base is the orange. Linear, top→bottom. */
  --achat-gradient: linear-gradient(180deg, #FFD32E 0%, #FFB72E 45%, #EF7C26 100%);
  --achat-gradient-warm: linear-gradient(135deg, #FFD32E 0%, #EF7C26 100%);

  /* ============ NEUTRALS / SURFACES ============ */
  --achat-ink:          #1A1A1A;   /* primary text / pure black logo lockup */
  --achat-ink-soft:     var(--achat-gris); /* secondary text */
  --achat-ink-muted:    var(--achat-gris-pale); /* tertiary / hints */
  --achat-paper:        #FFFFFF;   /* default surface */
  --achat-paper-warm:   #FBF7F1;   /* off-white, plays with prune-pale */
  --achat-paper-cream:  #FFF9E8;   /* derived from jaune-pale @ ~30% */
  --achat-line:         #E8E3DD;   /* hairline borders */
  --achat-line-strong:  #C9C2BA;

  /* ============ SEMANTIC COLOR ROLES ============
     Use these in product code; the brand tokens are raw paint. */
  --fg-1:   var(--achat-ink);
  --fg-2:   var(--achat-gris);
  --fg-3:   var(--achat-gris-pale);
  --fg-on-dark: #FFFFFF;

  --bg-1:   var(--achat-paper);
  --bg-2:   var(--achat-paper-warm);
  --bg-3:   var(--achat-paper-cream);
  --bg-inverse: var(--achat-ink);

  --accent:        var(--achat-jaune);
  --accent-strong: var(--achat-orange);
  --accent-soft:   var(--achat-jaune-pale);

  --success:       var(--achat-vert);
  --success-soft:  var(--achat-vert-pale);

  --link:          var(--achat-orange);
  --link-hover:    #C9651D;

  /* ============ TYPOGRAPHY ============ */
  /* Five families, each with one job. The two display + two body
     fonts are paired (moodboard pair vs spreadsheet pair); use the
     `--font-display-alt` / `--font-body-alt` aliases when you want
     the warmer Bricolage + Quicksand pairing on a marketing surface. */
  --font-display:     "Montserrat", system-ui, sans-serif;
  --font-display-alt: "Bricolage Grotesque", "Montserrat", system-ui, sans-serif;
  --font-body:        "Inter", system-ui, sans-serif;
  --font-body-alt:    "Quicksand", "Inter", system-ui, sans-serif;
  --font-editorial:   "Playfair Display", Georgia, serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, monospace;

  /* Modular type scale — 1.250 (major third), generous for warmth */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.5rem;    /* 88 — hero */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.18em;  /* SOUS-TITRE eyebrow style */

  /* ============ SPACING (4px base, 8 main steps) ============ */
  --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 ============
     The pin/diamond mark has soft-but-confident corners; UI follows. */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ============ SHADOWS ============
     Warm-tinted shadows (prune-flavored), low and soft. ACHAT uses
     elevation sparingly — paper, not glass. */
  --shadow-1: 0 1px 2px rgba(111, 90, 81, 0.08);
  --shadow-2: 0 4px 12px rgba(111, 90, 81, 0.10);
  --shadow-3: 0 12px 32px rgba(111, 90, 81, 0.14);
  --shadow-4: 0 24px 60px rgba(111, 90, 81, 0.18);
  --shadow-focus: 0 0 0 4px rgba(255, 211, 46, 0.40); /* jaune halo */

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.22, 1, 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-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* ============ LAYOUT ============ */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
}

/* ---------- Element defaults --------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  background: var(--bg-1);
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }

p  { margin: 0 0 var(--space-4); }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

::selection { background: var(--achat-jaune); color: var(--achat-ink); }

/* ---------- Utility classes ---------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--achat-orange);
}
.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
}
.numeral {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Scroll-triggered animations ------------------------ */
@keyframes achat-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes achat-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes achat-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes achat-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Base hidden state — sections start invisible, JS reveals them */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a revealed container */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }

/* Reduced motion: disable all entrance animations */
@media (prefers-reduced-motion: reduce) {
  [data-animate], [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}