/* =====================================================================
   ESPACE PINEUILH — Vape & CBD · Color + Type Foundations
   Brand: lime "vapor" green (#A4C41C) + ink black, on clean white.
   ---------------------------------------------------------------------
   FONT NOTE (substitution — please confirm):
   The "ESPACE PINEUILH" wordmark is a heavy geometric grotesque. No font
   file was supplied, so the nearest Google Fonts match is used:
     • Display  -> Montserrat (700 / 800 / 900)   — wordmark stand-in
     • Body/UI  -> Mulish     (400 / 600 / 700)   — friendly humanist sans
   If you have the real brand typeface, drop the .woff2 in /fonts and
   swap the @import below.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Mulish:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --brand-green:        #A4C41C;   /* primary — the vapor lime */
  --brand-green-bright: #B6D62A;   /* lifted / glow */
  --brand-ink:          #111111;   /* wordmark black */

  /* ---------- GREEN SCALE ---------- */
  --green-50:   #F6FAE6;
  --green-100:  #EAF3C6;
  --green-200:  #D7E895;
  --green-300:  #C2DA5E;
  --green-400:  #B0CF35;
  --green-500:  #A4C41C;   /* = brand-green */
  --green-600:  #8AA713;
  --green-700:  #6C840F;
  --green-800:  #51630E;   /* accessible green text on white */
  --green-900:  #3A470C;

  /* ---------- INK / NEUTRALS (faint warm-green cast) ---------- */
  --ink-900:    #14150F;   /* near-black, primary text */
  --ink-800:    #24261C;
  --ink-700:    #36382D;
  --gray-600:   #5C5F52;   /* secondary text */
  --gray-500:   #797C6E;   /* muted / placeholder */
  --gray-400:   #A3A697;
  --gray-300:   #CBCDC0;   /* borders */
  --gray-200:   #E4E6DC;   /* hairlines / fills */
  --gray-100:   #F1F2EC;   /* app background */
  --gray-50:    #F8F9F4;
  --white:      #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --success:    #4F9A2E;
  --success-bg: #E9F4E1;
  --warning:    #E0A106;
  --warning-bg: #FBF1D4;
  --danger:     #CF3E3E;
  --danger-bg:  #FAE3E3;
  --info:       #2C77C9;
  --info-bg:    #E2EDF9;

  /* ---------- SEMANTIC ROLES ---------- */
  --fg:           var(--ink-900);
  --fg-muted:     var(--gray-600);
  --fg-subtle:    var(--gray-500);
  --fg-on-brand:  var(--ink-900);   /* ink reads best on lime */
  --bg:           var(--white);
  --bg-app:       var(--gray-100);
  --bg-tint:      var(--green-50);
  --border:       var(--gray-300);
  --border-soft:  var(--gray-200);
  --accent:       var(--brand-green);
  --accent-text:  var(--green-800);
  --link:         var(--green-800);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (1.250 major-third) ---------- */
  --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 */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.55;
  --tracking-tight: -0.02em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* eyebrow / overline */

  /* ---------- RADII ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- SHADOWS (cool, low, natural) ---------- */
  --shadow-xs: 0 1px 2px rgba(20,21,15,0.06);
  --shadow-sm: 0 2px 6px rgba(20,21,15,0.07);
  --shadow-md: 0 8px 20px rgba(20,21,15,0.09);
  --shadow-lg: 0 18px 44px rgba(20,21,15,0.14);
  --shadow-brand: 0 10px 28px rgba(164,196,28,0.35);
  --ring-brand: 0 0 0 3px rgba(164,196,28,0.40);
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES — opt in with class .ep-type on a container
   ===================================================================== */
.ep-type { color: var(--fg); font-family: var(--font-body); }

.ep-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}
.ep-h1, h1.ep {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}
.ep-h2, h2.ep {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}
.ep-h3, h3.ep {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.ep-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.ep-body, p.ep {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.ep-small { font-size: var(--text-sm); color: var(--fg-muted); }
.ep-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; }
.ep-price {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}