/* ============================================================
   Épaule Perf — Design Tokens
   Sources: 
   - Website tokens lifted verbatim from epaule-perf.netlify.app
   - Instagram palette extracted from reference carousel pixel sample
   
   Fonts: Inter Tight + Instrument Serif + JetBrains Mono
   All on Google Fonts. Load via:
   <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---------- TYPE STACKS ---------- */
  --font-sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', ui-serif, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-logo:  'Anton', 'Inter Tight', sans-serif;   /* logo wordmark ONLY */

  /* Weights — Inter Tight is used MEDIUM (500) for headlines, REGULAR (400) for body.
     The brand never uses Black 800 — it relies on Instrument Serif italic for impact. */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---------- WEBSITE PALETTE (primary) ---------- */
  /* Lifted from the production site. Use for: website, ebooks, email,
     long-form / "editorial" surfaces. */
  --cream:   #F2EFE6;   /* primary BG */
  --paper:   #EBE7DA;   /* secondary surface, sunk */
  --ink:     #0F1115;   /* primary text — near-black, slight blue */
  --night:   #0E1A3A;   /* DEEP NAVY — primary accent, CTAs, dark blocks */
  --night-2: #152348;   /* lighter navy */
  --terra:   #6E00F0;   /* VIOLET — secondary accent (note: var named "terra" but value is purple) */
  --terra-2: #5500BD;   /* darker violet */
  --mid:     #6B6A62;   /* warm grey — meta */
  --line:    rgba(15, 17, 21, 0.10);
  --line-2:  rgba(15, 17, 21, 0.18);

  /* ---------- INSTAGRAM PALETTE (social variant) ---------- */
  /* Extracted from the reference carousel. Used for stop-scroll social content.
     Same warm-neutral logic but a different accent family — high-energy cobalt
     instead of editorial navy/violet.
     ALSO usable in the editorial system as secondary "info / link" accents
     when you want the blue voice instead of the violet voice — exposed below
     as --accent-info. */
  --ig-cream:   #F8F7F2;
  --ig-blue:    #3B5BDB;   /* primary cobalt accent */
  --ig-blue-2:  #2C46B8;   /* press */
  --ig-blue-3:  #4A6BE8;   /* hover */
  --ig-tint:    #CFD5ED;   /* lavender — large decorative shapes */
  --ig-wash:    #E6E9F7;   /* very light blue wash */

  /* Secondary accent (cobalt) — usable on editorial surfaces too.
     Use for "info" voice / link emphasis when violet would be too loud. */
  --accent-info:        var(--ig-blue);
  --accent-info-press:  var(--ig-blue-2);

  /* ---------- SEMANTIC ALIASES ---------- */
  --bg:           var(--cream);
  --bg-surface:   var(--paper);
  --fg:           var(--ink);
  --fg-mute:      var(--mid);
  --accent-1:     var(--night);    /* CTAs */
  --accent-2:     var(--terra);    /* hovers, pops */
  --border:       var(--line);
  --border-strong: var(--line-2);

  /* Semantic — used sparingly */
  --success:    #1F8A5B;
  --warning:    #D97757;
  --danger:     #C53030;

  /* ---------- SPACE / RADIUS / SHADOW ---------- */
  --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;

  --r-xs:   4px;     /* prob-grid */
  --r-sm:   6px;     /* portrait, photos */
  --r-md:   10px;    /* testimonials block */
  --r-lg:   14px;    /* CTA bar */
  --r-pill: 99px;    /* all buttons */

  --shadow-sm: 0 1px 0 rgba(15, 17, 21, 0.05);
  --shadow-md: 0 14px 28px -12px rgba(110, 0, 240, 0.30);   /* uses brand violet */
  --shadow-lg: 0 30px 60px -30px rgba(14, 26, 58, 0.40);    /* uses brand navy */

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;   /* opacity, color */
  --dur-base: 250ms;   /* transforms */
  --dur-slow: 350ms;   /* faq reveal */

  /* ---------- TYPE SCALE ---------- */
  /* Mirrors the site exactly. Use these in component CSS. */
  --t-h1:       clamp(3.6rem, 7.6vw, 8rem);        /* 57.6-128px */
  --t-h2:       clamp(2.4rem, 4.6vw, 4.6rem);      /* 38-73px */
  --t-h3:       1.7rem;                            /* ~27px - prob/plan name */
  --t-step:     1.55rem;                           /* method step */
  --t-body-lg:  1.18rem;                           /* hero lede */
  --t-body:     17px;                              /* body baseline */
  --t-small:    0.94rem;                           /* prob list */
  --t-meta:     0.85rem;
  --t-eyebrow:  0.7rem;                            /* mono CAPS labels */
  --t-tiny:     0.66rem;                           /* portrait tag */

  --lh-tight:  0.95;
  --lh-snug:   1.05;
  --lh-base:   1.55;

  --ls-tight:  -0.035em;
  --ls-snug:   -0.025em;
  --ls-eyebrow: 0.14em;
  --ls-mono:   0.16em;
}

/* ============================================================
   Base body
   Apply class .ep-body to <body> or any container.
   ============================================================ */
.ep-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — uses Inter Tight 500 + Instrument Serif italic accent.
   IMPORTANT: This is a 2-voice headline system. Never use bold Inter for emphasis;
   always swap to Instrument Serif italic on the word that should pop. */
.ep-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.ep-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 18ch;
}

.ep-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: var(--t-h3);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* SIGNATURE: italic serif accent for emphasis words inside headlines */
.ep-italic, .it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  letter-spacing: -0.01em;
  color: var(--night);    /* on light bg */
}
.ep-italic.terra, .it.terra { color: var(--terra); }

/* Mono caps eyebrow / pagination / @handle */
.ep-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
}

/* ============================================================
   LOGO — Anton italic skewed wordmark
   Lockup "ÉP" (compact) and full "ÉPAULE PERF" (extended).
   "É" in ink, "P" in terra. Skewed -10deg italic.
   ============================================================ */
.ep-logo {
  font-family: var(--font-logo);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.82;
  color: var(--ink);
  font-size: 56px;
  transform: skewX(-10deg);
  display: inline-block;
  white-space: nowrap;
}
.ep-logo .terra { color: var(--terra); }
.ep-logo.invert { color: var(--cream); }
.ep-logo.invert .terra { color: var(--cream); }
.ep-logo.on-terra { color: var(--cream); }
.ep-logo.on-terra .terra { color: var(--ink); }

/* Lockup with subscript role line (mono CAPS) */
.ep-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.ep-logo-lockup .role {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  line-height: 1.35;
  padding-left: 18px;
  border-left: 1px solid var(--line-2);
}

.ep-body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  font-weight: var(--w-regular);
  color: #2c2e34;   /* slightly softer than --ink, matches site .hero-lede */
}

/* ============================================================
   IG variant — use these inside Instagram surfaces to flip
   the accent system to cobalt blue.
   Wrap with class .ep-ig
   ============================================================ */
.ep-ig {
  background: var(--ig-cream);
  --accent-1: var(--ig-blue);
  --accent-2: var(--ig-blue);
  /* Inside .ep-ig, .it should be blue, not navy */
}
.ep-ig .ep-italic, .ep-ig .it { color: var(--ig-blue); }

/* ============================================================
   Backward-compat aliases — old var names from early drafts
   point at the right tokens so existing preview cards keep working.
   ============================================================ */
:root {
  --ep-cream:      var(--ig-cream);
  --ep-cream-deep: var(--paper);
  --ep-black:      var(--ink);
  --ep-ink-soft:   var(--ink);
  --ep-ink-mute:   var(--mid);
  --ep-blue:       var(--ig-blue);
  --ep-blue-press: var(--ig-blue-2);
  --ep-blue-hover: var(--ig-blue-3);
  --ep-blue-tint:  var(--ig-tint);
  --ep-blue-wash:  var(--ig-wash);
  --ep-success:    var(--success);
  --ep-warning:    var(--warning);
  --ep-danger:     var(--danger);
  --fg-1: var(--ink);
  --fg-2: var(--ink);
  --fg-3: var(--mid);
  --bg-1: var(--ig-cream);
  --border-1: var(--line-2);
  --border-2: var(--line);
}