/* ============================================================
   YOGASANA — Design System Tokens
   colors_and_type.css
   ============================================================ */

/* ------------------------------------------------------------
   GOOGLE FONTS IMPORT
   ⚠️ Substitution: Cormorant Garamond + DM Sans + DM Mono
      Ask Roxanne Blondel for original brand font files.
   ------------------------------------------------------------ */
@import url('https://fonts.cdnfonts.com/css/open-sauce-sans');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ----------------------------------------------------------
     BASE COLOR PALETTE
     ---------------------------------------------------------- */

  /* Cream / Background */
  --color-cream:        #F5F0E8;
  --color-cream-dark:   #EDE6D6;
  --color-cream-deeper: #E3D9C6;

  /* Terracotta / Primary Accent */
  --color-terracotta:        #C4714A;
  --color-terracotta-light:  #DDA07A;
  --color-terracotta-lighter:#EEC9AE;
  --color-terracotta-dark:   #9E4F2A;

  /* ---- BRAND BOOK V1 palette (authoritative) ---- */
  --color-clay:        #C96027;   /* Terracotta — signature, fond par défaut */
  --color-clay-deep:   #C96027;   /* aliasé sur terracotta (foncé retiré) */
  --color-espresso:    #3E2D26;   /* Espresso — texte & fond profond */
  --color-cream-warm:  #F4ECDD;   /* Crème — base & texte clair (sur terracotta/espresso only) */
  --color-sable:       #E7D8C2;   /* Sable — séparateurs, fonds doux */
  --color-lilas:       #D8C0E2;   /* Lilas — accent / ponctuation (~1 carte/5) */
  --color-jaune:       #FFECC9;   /* Jaune beurre — accent / ponctuation */
  /* Back-compat aliases — 'blush' now points to Sable (soft neutral bg) */
  --color-blush:       #E7D8C2;
  --color-blush-deep:  #DAC8AE;

  /* Sage Green / Secondary Accent */
  --color-sage:        #8BA888;
  --color-sage-light:  #B4CCAF;
  --color-sage-lighter:#D4E5D2;
  --color-sage-dark:   #5C7A5A;

  /* Dusty Rose */
  --color-rose:        #D4917E;
  --color-rose-light:  #EBC4B5;
  --color-rose-lighter:#F5E2DA;

  /* Ink / Text */
  --color-ink:         #2C2417;
  --color-ink-mid:     #4A3D2F;
  --color-ink-light:   #6B5E4E;
  --color-ink-faint:   #9E8E7A;

  /* Sand / Neutrals */
  --color-sand:        #C9B99A;
  --color-sand-light:  #E0D4C0;
  --color-sand-lighter:#EEE7D8;

  /* Pure utility */
  --color-white:       #FDFAF5;
  --color-black:       #1A1208;

  /* ----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ---------------------------------------------------------- */

  /* Backgrounds */
  --bg-page:          var(--color-cream);
  --bg-section:       var(--color-cream-dark);
  --bg-card:          var(--color-white);
  --bg-accent:        var(--color-cream-deeper);
  --bg-inverse:       var(--color-ink);
  --bg-sage:          var(--color-sage-lighter);
  --bg-terracotta:    var(--color-terracotta-lighter);

  /* Foreground / Text */
  --fg-primary:       var(--color-ink);
  --fg-secondary:     var(--color-ink-mid);
  --fg-muted:         var(--color-ink-light);
  --fg-subtle:        var(--color-ink-faint);
  --fg-on-dark:       var(--color-cream);
  --fg-accent:        var(--color-terracotta);

  /* Borders */
  --border-default:   var(--color-sand-light);
  --border-strong:    var(--color-sand);
  --border-accent:    var(--color-terracotta-light);

  /* Interactive */
  --color-cta:        var(--color-terracotta);
  --color-cta-hover:  var(--color-terracotta-dark);
  --color-cta-subtle: var(--color-terracotta-lighter);

  /* Status */
  --color-success:    var(--color-sage-dark);
  --color-error:      #B04040;
  --color-warning:    #C4974A;

  /* ----------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     ⚠️ Google Fonts substitution; replace with brand originals
     ---------------------------------------------------------- */
  --font-display:     'Open Sauce Sans', 'Helvetica Neue', sans-serif;
  --font-serif:       'Cormorant Garamond', 'Georgia', serif;
  --font-body:        'Open Sauce Sans', 'Helvetica Neue', sans-serif;
  --font-mono:        'Space Mono', 'DM Mono', 'Courier New', monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — SCALE (fluid-friendly rem values)
     ---------------------------------------------------------- */
  --text-xs:     0.6875rem;   /* 11px */
  --text-sm:     0.8125rem;   /* 13px */
  --text-base:   1rem;        /* 16px */
  --text-md:     1.125rem;    /* 18px */
  --text-lg:     1.3125rem;   /* 21px */
  --text-xl:     1.625rem;    /* 26px */
  --text-2xl:    2rem;        /* 32px */
  --text-3xl:    2.75rem;     /* 44px */
  --text-4xl:    3.75rem;     /* 60px */
  --text-5xl:    5rem;        /* 80px */

  /* ----------------------------------------------------------
     TYPOGRAPHY — WEIGHTS
     ---------------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ----------------------------------------------------------
     SEMANTIC TYPE ROLES
     ---------------------------------------------------------- */
  --type-hero-size:       var(--text-5xl);
  --type-hero-family:     var(--font-display);
  --type-hero-weight:     var(--weight-light);
  --type-hero-leading:    1.05;
  --type-hero-tracking:   -0.02em;

  --type-h1-size:         var(--text-4xl);
  --type-h1-family:       var(--font-display);
  --type-h1-weight:       var(--weight-light);
  --type-h1-leading:      1.1;
  --type-h1-tracking:     -0.01em;

  --type-h2-size:         var(--text-3xl);
  --type-h2-family:       var(--font-display);
  --type-h2-weight:       var(--weight-regular);
  --type-h2-leading:      1.15;

  --type-h3-size:         var(--text-2xl);
  --type-h3-family:       var(--font-display);
  --type-h3-weight:       var(--weight-medium);
  --type-h3-leading:      1.2;

  --type-h4-size:         var(--text-xl);
  --type-h4-family:       var(--font-body);
  --type-h4-weight:       var(--weight-medium);
  --type-h4-leading:      1.3;

  --type-lead-size:       var(--text-lg);
  --type-lead-family:     var(--font-body);
  --type-lead-weight:     var(--weight-light);
  --type-lead-leading:    1.6;

  --type-body-size:       var(--text-base);
  --type-body-family:     var(--font-body);
  --type-body-weight:     var(--weight-regular);
  --type-body-leading:    1.65;

  --type-small-size:      var(--text-sm);
  --type-small-family:    var(--font-body);
  --type-small-weight:    var(--weight-regular);
  --type-small-leading:   1.5;

  --type-label-size:      var(--text-xs);
  --type-label-family:    var(--font-body);
  --type-label-weight:    var(--weight-medium);
  --type-label-tracking:  0.08em;
  --type-label-transform: uppercase;

  --type-mono-size:       var(--text-sm);
  --type-mono-family:     var(--font-mono);

  /* ----------------------------------------------------------
     SPACING SCALE
     ---------------------------------------------------------- */
  --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;
  --space-40:  160px;

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-card:  10px;   /* Physical card feel */
  --radius-pill:  999px;

  /* ----------------------------------------------------------
     SHADOWS (warm-tinted, not cold grey)
     ---------------------------------------------------------- */
  --shadow-xs:   0 1px 4px rgba(44, 36, 23, 0.08);
  --shadow-sm:   0 2px 8px rgba(44, 36, 23, 0.10);
  --shadow-md:   0 4px 20px rgba(44, 36, 23, 0.10);
  --shadow-lg:   0 8px 40px rgba(44, 36, 23, 0.12);
  --shadow-xl:   0 16px 64px rgba(44, 36, 23, 0.14);
  --shadow-card: 0 6px 24px rgba(44, 36, 23, 0.12);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --nav-height: 72px;
}

/* ----------------------------------------------------------
   BASE RESET + DEFAULTS
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-body-leading);
  color: var(--fg-primary);
  background-color: var(--bg-page);
}

/* ----------------------------------------------------------
   SEMANTIC TYPE UTILITY CLASSES
   ---------------------------------------------------------- */
.type-hero {
  font-family: var(--type-hero-family);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  line-height: var(--type-hero-leading);
  letter-spacing: var(--type-hero-tracking);
  color: var(--fg-primary);
}
h1, .type-h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
  color: var(--fg-primary);
}
h2, .type-h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  color: var(--fg-primary);
}
h3, .type-h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  color: var(--fg-primary);
}
h4, .type-h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  color: var(--fg-primary);
}
.type-lead {
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-leading);
  color: var(--fg-secondary);
}
p, .type-body {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--fg-primary);
}
small, .type-small {
  font-family: var(--type-small-family);
  font-size: var(--type-small-size);
  font-weight: var(--type-small-weight);
  line-height: var(--type-small-leading);
  color: var(--fg-muted);
}
.type-label {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  color: var(--fg-muted);
}
code, .type-mono {
  font-family: var(--type-mono-family);
  font-size: var(--type-mono-size);
}

/* ============================================================
   BRAND BOOK V1 — Display = Archivo condensé gras.
   Centralized condensed width on display/heading roles so every
   page inherits it. :where() keeps specificity at 0 (font-stretch
   only; pages still control size/weight/color).
   ============================================================ */
:where(
  h1, h2, h3, .display,
  .hero-title, .head-title, .cta-title, .about-title, .format-title,
  .pricing-title, .problems-title, .mission-quote, .temo-quote, .faq-q,
  .univ-name, .univ-title, .pilier-name, .value-title, .tl-title, .tl-year,
  .fgroup-title, .ftitle, .nav-logo, .footer-logo,
  .ig-title, .pil-name, .q-text, .m-text, .punch, .cover-title,
  .cta-card .big, .featured-title, .upcoming-title, .format-title,
  .hero-eyebrow, .section-title, .universe-title, .pillar-title, .testi-text
) {
  font-stretch: normal;
}
:where(.nav-logo, .footer-logo, .ig-logo) { font-stretch: normal; }

/* ============================================================
   NAV DROPDOWN — "Accompagnements" flyout (shared)
   ============================================================ */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop-toggle::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .2s; opacity: 0.7; }
.nav-dropdown:hover .nav-drop-toggle::after, .nav-dropdown:focus-within .nav-drop-toggle::after { transform: rotate(225deg) translateY(-1px); }
.nav-submenu { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 230px; background: var(--color-cream-warm); border-radius: 6px; padding: 10px 0; box-shadow: 0 24px 60px -24px rgba(45,38,34,0.5); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 200; display: flex; flex-direction: column; }
.nav-submenu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 8px); }
.nav-submenu a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-espresso) !important; padding: 11px 24px; white-space: nowrap; transition: background .15s, color .15s; }
.nav-submenu a:hover { background: rgba(201,96,39,0.1); color: var(--color-clay) !important; }
.nav-submenu a.sub-featured { color: var(--color-clay) !important; font-weight: 700; }
@media (max-width: 900px) { .nav-dropdown, .nav-submenu { display: none; } }

/* ============================================================
   MOBILE — texte courant en Poppins.
   On redéfinit --font-body : tout ce qui hérite de cette variable
   (paragraphes, leads, bios, corps de texte) passe en Poppins sur
   mobile. Les gros titres (--font-display = Open Sauce) et les
   labels/eyebrows (--font-mono = Space Mono) ne changent pas :
   l'identité de la marque reste intacte.
   ============================================================ */
@media (max-width: 900px) {
  :root { --font-body: 'Poppins', 'Helvetica Neue', sans-serif; }
}