/* ╔════════════════════════════════════════════════════════════════════════╗
   ║ CAARMO Brand Identity Overrides — per Style Guide v1.0 (May 2026)       ║
   ║                                                                          ║
   ║ Single source of truth for v2 pages. Link this AFTER the page's main    ║
   ║ stylesheet so it cascades on top. Re-points legacy theme tokens to      ║
   ║ brand-exact values; forces Montserrat globally; pill buttons; 12px      ║
   ║ cards; no italic; no Playfair / no Inter / no serif anywhere.           ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

:root {
  /* ─── Approved palette ─── */
  --bg-green-light:  #3AB54A;  /* Brand Green Light — CTAs, accents */
  --bg-green-dark:   #33A543;  /* Brand Green Dark  — hover, wordmark */
  --bg-deep-green:   #0F3D28;  /* Deep Green        — hero, dialog, footer */
  --bg-dark-gray:    #585555;  /* Dark Gray         — secondary text + button */
  --bg-tint:         #F5F8F5;  /* Background Tint   — cards / sections */
  --bg-black:        #0F1A14;  /* Pure Black        — body text on light */
  --bg-white:        #FFFFFF;  /* Pure White */
  --bg-eyebrow-gold: #C9A961;  /* RESTRICTED — eyebrows on deep green ONLY */
  --bg-gridline:     #D9D9D9;  /* Gridlines / hairlines */

  /* ─── Legacy token re-point ─── makes every existing rule that uses
        these tokens render the brand-exact colour automatically. */
  --gl:     #3AB54A;
  --gd:     #33A543;
  --green:  #0F3D28;
  --green2: #33A543;
  --green3: #3AB54A;
  --cream:  #F5F8F5;
  --black:  #0F1A14;
  --blk:    #0F1A14;
  --wht:    #FFFFFF;
  --ink:    #0F1A14;
  --ink2:   #0F1A14;
  --ink3:   #585555;
  --ink4:   #585555;
  --ink5:   #828780;
  --gray:   #585555;
  --tint:   #F5F8F5;
  --bdr:    #D9D9D9;
  --border: #D9D9D9;
  --gold:   #C9A961;

  /* ─── 4/8 spacing tokens ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ─── Brand corner radii ─── */
  --r-button: 999px;
  --r-input:    8px;
  --r-card:    12px;
  --r-dialog:  16px;
  --rsm:        8px;  /* legacy alias */
  --r:         12px;  /* legacy alias */
}

/* ─── Force Montserrat globally + strip every italic everywhere ─── */
body, body *,
h1, h2, h3, h4, h5, h6, p, span, div, li, a, button, input, textarea, select, label, em, i {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-style: normal !important;
}

/* JetBrains Mono allowed for code blocks only. */
code, pre, .mono, .code {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace !important;
}

/* SVG can opt-out — it has its own typography concerns. */
svg, svg * { font-family: inherit; }

/* ─── Buttons: brand pill spec ──────────────────────────────────────────
   999px radius, Montserrat 600, no gradients, no drop shadows. Targets
   the common button class shapes used across pages. */
.btn, .btn-primary, .btn-secondary, .btn-dark, .btn-cta, .btn-submit,
.btn-portal, .btn-hero-primary, .btn-hero-ghost,
.btn-modal-cancel, .btn-modal-ok,
.btn-export, .btn-reset, .oauth-btn {
  border-radius: var(--r-button) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: .005em !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
  padding: 12px 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

/* Primary buttons — Brand Green Light fill, white text. */
.btn-primary, .btn-cta, .btn-hero-primary, .btn-submit, .btn-modal-ok,
.oauth-btn.primary {
  background: var(--bg-green-light) !important;
  color: var(--bg-white) !important;
}
.btn-primary:hover, .btn-cta:hover, .btn-hero-primary:hover,
.btn-submit:hover, .btn-modal-ok:hover, .oauth-btn.primary:hover {
  background: var(--bg-green-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary / "dark" buttons — Dark Gray fill, white text. */
.btn-secondary, .btn-dark, .btn-modal-cancel, .oauth-btn.secondary {
  background: var(--bg-dark-gray) !important;
  color: var(--bg-white) !important;
}
.btn-secondary:hover, .btn-dark:hover,
.btn-modal-cancel:hover, .oauth-btn.secondary:hover {
  background: #4F4C4C !important;
}

/* Ghost button — transparent with subtle border, brand-approved for
   "tertiary action" but kept lightly styled here for usability. */
.btn-hero-ghost {
  background: transparent !important;
  color: var(--bg-white) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.btn-hero-ghost:hover {
  border-color: rgba(255,255,255,.5) !important;
}

/* Portal-link button (on dark backgrounds, e.g. landing nav). */
.btn-portal {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
}
.btn-portal:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* ─── Eyebrows / labels ─── Montserrat 600 caps, +0.04em tracking, 14px.
   Eyebrow Gold only used on deep-green panels (see selectors below). */
.eyebrow, .sec-eyebrow, .hero-eyebrow, .section-eyebrow,
.card-ey, .adv-lbl, .sb-lbl, .label-ey,
.modal-ey, .pattern-tag, .stat-label,
.privacy-bar-identity, .privacy-cta-eyebrow, .radar-left-eyebrow,
.hdr-diag, .left-eyebrow, .ev-eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Eyebrows on deep-green backgrounds → Eyebrow Gold (brand-restricted use). */
.sidebar .sb-lbl,
.privacy-bar-identity,
[data-variant="dark"] ~ .eyebrow,
.hero .hero-eyebrow,
.hdr-diag,
.left-eyebrow {
  color: var(--bg-eyebrow-gold) !important;
}

/* ─── Card corner radius — brand 12px. ─── */
.card, .adv-banner, .stat-card, .dim-card, .pattern-card, .q-card,
.path-card, .modal, .punchline, .quote, .insight-card,
.cta-strip, .sess-cta {
  border-radius: var(--r-card) !important;
}

/* Dialog boxes per brand — 16px radius. */
.dialog, .modal-bg .modal[data-kind="dialog"] {
  border-radius: var(--r-dialog) !important;
}

/* Input fields per brand — 8px radius. */
input, textarea, select, .field input, .field textarea, .field select {
  border-radius: var(--r-input) !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ─── Accent emphasis (replaces italic emphasis on hero/section titles).
   Used by <em> wrapped words in headings — colours them Brand Green Light
   instead of italicising them. */
.hero-title em, .section-title em, .path-title em, .final-title em,
.left-title em, .left-title .accent,
.hero-title .accent, .section-title .accent {
  color: var(--bg-green-light) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Subtle emphasis inside quoted text — stay weight-only, no colour. */
.proof-quote em, blockquote em, .quote em {
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ─── Stats / number displays — Montserrat 700 (was Playfair on many pages). ─── */
.stat-n, .stat-num, .stat-val, .path-stat-n, .path-card-num, .how-num,
.score-number {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.stat-l, .stat-lbl, .path-stat-l {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}

/* ─── Strip Playfair/serif/italic from hero & section titles ─── */
.hero-title, .section-title, .path-title, .final-title,
.footer-brand, .left-title,
.modal-title, .modal-ttl,
.success-title, .success-icon,
.oauth-loader-title, .form-title,
h1, h2, h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
}