/* WE GARTNER — Colors & Type tokens
 * Canonical reference: WEGARTNER-DESIGN-SYSTEM-BRIEF-2026 v1.3
 * Loads: fonts/fonts.css (self-hosted Fraunces / Inter / Bebas Neue)
 */

@import url('./fonts/fonts.css');

:root {
  /* ============================================================
   * COLORS — palette officielle (verbatim §5.1)
   * ============================================================ */

  /* Violets — identité primaire */
  --violet:         #7C5CFC;
  --violet-light:   #9B85FD;
  --violet-pale:    #E8E0FF;
  --violet-lighter: #F5F2FF;
  --violet-deep:    #3A2A8E;

  /* Roses / fuchsia — action + énergie */
  --fuchsia:        #E84672;
  --fuchsia-light:  #FDE8EE;
  --rose:           #E8739E;
  --rose-light:     #FBE5EE;

  /* Orange / coral — chaleur, accent */
  --orange:         #F5A623;
  --orange-light:  #FFF0D9;
  --coral:          #FF7854;
  --coral-light:   #FFE4DC;

  /* Lilas / lavande — douceur, fonds */
  --lilas:          #D4A5E5;
  --lavande:        #F5F2FF;

  /* Neutres clairs */
  --cream:          #FAF9F5;
  --bg:             #FAFAFF;

  /* Texte */
  --navy:           #1A1A2E;
  --text:           #1A1A2E;
  --text-light:     #6B7280;
  --gray-blue:      #4A4A6A;

  /* Bordures */
  --border:         #E5E7EB;
  --border-soft:    #EDE8FF;

  /* Progression — seul vert autorisé (Photo Card progress) */
  --progress-fill:  #7EDD72;

  /* CTA sur photo sombre — cream + texte navy (PAS fuchsia, PAS beige) */
  --cta-on-photo:   #FAF9F5;

  /* === v1.6 — Tokens texte/badge sur fond sombre (anti-beige) === */
  --text-on-dark:        #FFFFFF;            /* défaut, lecture max */
  --text-on-dark-alt:    #FAF9F5;            /* cream — alternative douce */
  --label-on-dark:       #FAF9F5;            /* labels, légendes, périphériques */
  --badge-on-dark-bg:    rgba(255,255,255,0.12);
  --badge-on-dark-text:  #FAF9F5;
  --badge-on-dark-border:rgba(255,255,255,0.22);

  /* ============================================================
   * GRADIENTS — les 3 seuls autorisés
   * ============================================================ */

  --warm-gradient:      linear-gradient(135deg, #F5A623 0%, #E84672 50%, #7C5CFC 100%); /* @kind color */
  --warm-gradient-soft: linear-gradient(135deg, #FFF0D9 0%, #FDE8EE 45%, #E8E0FF 100%); /* @kind color */
  --bright-gradient:    linear-gradient(135deg, #7C5CFC 0%, #E84672 60%, #F5A623 100%); /* @kind color */

  /* Photo overlays officiels (§7.5) */
  --overlay-A: linear-gradient(135deg, rgba(26,26,46,0.7) 0%, rgba(124,92,252,0.4) 100%); /* @kind color */
  --overlay-B: linear-gradient(to right, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.5) 50%, transparent 100%); /* @kind color */
  --overlay-C: linear-gradient(135deg, rgba(124,92,252,0.85) 0%, rgba(232,70,114,0.7) 100%); /* @kind color */
  --overlay-formation: linear-gradient(180deg, rgba(26,26,46,0.15) 0%, rgba(26,26,46,0.55) 55%, rgba(26,26,46,0.85) 100%); /* @kind color */
  --overlay-quote: rgba(26,26,46,0.65); /* @kind color */
  --overlay-speaker: linear-gradient(0deg, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.3) 40%, transparent 65%); /* @kind color */

  /* ============================================================
   * SEMANTIC FOREGROUND / BACKGROUND
   * ============================================================ */

  --fg1:  var(--navy);          /* primary text, titles */
  --fg2:  var(--gray-blue);     /* secondary */
  --fg3:  var(--text-light);    /* metadata, hints */
  --fg-on-grad: #FFFFFF;        /* text on warm/bright gradient */

  --bg1:  #FFFFFF;              /* primary surface */
  --bg2:  var(--cream);         /* alt section */
  --bg3:  var(--lavande);       /* tertiary surface */
  --bg-grad-hero: var(--warm-gradient);
  --bg-grad-soft: var(--warm-gradient-soft);

  /* ============================================================
   * TYPOGRAPHY — 3 families, 3 strict roles (§5.4)
   * ============================================================ */

  --serif-display: 'Fraunces', 'Times New Roman', Georgia, serif; /* @kind font */
  --sans-text:     'Inter', system-ui, -apple-system, sans-serif; /* @kind font */
  --display-claim: 'Bebas Neue', Impact, sans-serif; /* @kind font */

  /* Type scale (§5.5) */
  --fs-display:    clamp(56px, 8vw, 84px); /* @kind font */
  --fs-h1:         clamp(40px, 6vw, 64px); /* @kind font */
  --fs-h2:         clamp(34px, 4vw, 48px); /* @kind font */
  --fs-h3:         clamp(24px, 2.4vw, 32px); /* @kind font */
  --fs-h4:         22px; /* @kind font */
  --fs-h5:         18px; /* @kind font */
  --fs-section-num: 90px; /* @kind font */
  --fs-body:       17px; /* @kind font */
  --fs-lede:       18px; /* @kind font */
  --fs-small:      14px; /* @kind font */
  --fs-chapeau:    11px; /* @kind font */
  --fs-tagline:    13px; /* @kind font */
  --fs-claim:      22px; /* @kind font */
  --fs-meta:       11px; /* @kind font */

  --lh-tight:   1.1; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-base:    1.6; /* @kind font */
  --lh-loose:   1.75; /* @kind font */

  --ls-tight:   -0.015em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-tagline: 0.08em; /* @kind font */
  --ls-chapeau: 0.2em; /* @kind font */
  --ls-claim:   0.15em; /* @kind font */
  --ls-meta:    0.1em; /* @kind font */
  --ls-tag:     0.12em; /* @kind font */

  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-xbold:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* ============================================================
   * SPACING — 4px system (§5.6)
   * ============================================================ */

  --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;

  --section-pad-y: 84px;
  --hero-pad:      96px 32px 84px; /* @kind spacing */
  --container-max: 1280px;
  --container-pad: 24px;

  /* ============================================================
   * BORDER RADIUS (§5.7)
   * ============================================================ */

  --r-tag:        14px;
  --r-card-s:     18px;
  --r-card-m:     22px;
  --r-card-l:     26px;
  --r-manifeste:  30px;
  --r-pill:       50px;

  /* ============================================================
   * SHADOWS (§5.8)
   * ============================================================ */

  --shadow-card:        0 2px 8px  rgba(26, 26, 46, 0.04);
  --shadow-card-hover:  0 12px 28px rgba(124, 92, 252, 0.10);
  --shadow-frame:       0 24px 72px rgba(124, 92, 252, 0.24);
  --shadow-cta:         0 8px 24px  rgba(232, 70, 114, 0.24);

  /* ============================================================
   * MOTION (§5.9)
   * ============================================================ */

  --ease-hover:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-section: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --ease-reveal:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-hover:    200ms; /* @kind other */
  --dur-section:  400ms; /* @kind other */
  --dur-reveal:   600ms; /* @kind other */
}

/* ============================================================
 * SEMANTIC TYPE STYLES — apply directly or @extend
 * ============================================================ */

html, body {
  font-family: var(--sans-text);
  font-size:   var(--fs-body);
  line-height: var(--lh-base);
  color:       var(--fg1);
  background:  var(--bg1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif-display);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-xbold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }

/* PATTERN H2 SIGNATURE — italic gradient span (§9.1) */
h1 span.grad,
h2 span.grad,
h3 span.grad {
  font-family: var(--serif-display);
  font-style: italic;
  background: var(--warm-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* The point final after H1 (§9.2) */
.dot {
  opacity: 0.7;
}

p { margin: 0; line-height: var(--lh-base); color: var(--fg1); }
.lede { font-size: var(--fs-lede); color: var(--fg2); line-height: var(--lh-base); }
.fg2 { color: var(--fg2); }
.fg3 { color: var(--fg3); }

/* Chapeau — uppercase eyebrow above H2 */
.chapeau {
  font-family: var(--sans-text);
  font-size: var(--fs-chapeau);
  font-weight: var(--fw-xbold);
  letter-spacing: var(--ls-chapeau);
  text-transform: uppercase;
  color: var(--violet);
}

/* Tagline (whisper) */
.tagline {
  font-family: var(--sans-text);
  font-size: var(--fs-tagline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tagline);
  color: var(--violet);
}
.tagline .sep { opacity: 0.5; padding: 0 0.4em; }

/* Claim (shout) */
.claim {
  font-family: var(--display-claim);
  font-size: var(--fs-claim);
  font-weight: 400;
  letter-spacing: var(--ls-claim);
  text-transform: uppercase;
  color: var(--fg1);
}

/* Section-num — 01/02 with gradient text-fill (§9.5) */
.section-num {
  font-family: var(--serif-display);
  font-size: var(--fs-section-num);
  font-weight: var(--fw-xbold);
  line-height: 1;
  background: var(--warm-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Big stat billboard (§9.6) */
.big-stat {
  font-family: var(--serif-display);
  font-size: clamp(64px, 10vw, 120px);
  font-weight: var(--fw-xbold);
  line-height: 1;
  background: var(--warm-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: var(--ls-tight);
}

/* Chapter num (manifesto §8.14) */
.chapter-num {
  font-family: var(--serif-display);
  font-size: 8rem;
  font-weight: var(--fw-black);
  line-height: 1;
  background: var(--warm-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.25;
}