/**
 * Leo Brand Variables — shared CSS fragment for all static landing pages.
 *
 * IMPORT ONCE per page, before any page-specific <style>:
 *   <link rel="stylesheet" href="/brand-vars.css">
 *
 * To change a brand token, change it here — all pages update instantly.
 * For React: use @scope/ui's theme.css (tokens mirror this file).
 * For TS constants (canvas, MapLibre, emails): import BRAND from @scope/ui.
 *
 * These tokens are the SINGLE SOURCE OF TRUTH for static HTML. Every
 * custom property referenced by a landing page must be defined here.
 *
 * NEVER use var() in a JavaScript string, Mapbox `paint`, Canvas
 * `fillStyle`, or email HTML. CSS resolution does not run there.
 * Use BRAND_COLORS from @scope/ui or inline the hex.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Single canonical import — never add per-page font links.
   All weights needed across the full site are loaded here.
   ──────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Google+Sans:wght@400;500;600;700&display=swap');

/* ── Brand tokens ──────────────────────────────────────────────────────────
   Names match the legacy landing-page convention so pages work with
   zero changes to existing var() calls.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Ink scale — base surface + gradient stops ──────────────────────────
     `--ink` is a SEMANTIC token: "primary text / dark surface in the
     current context". Dark-section wrappers like `.tab-area-trade` REBIND
     `--ink` to a light value so that default-light components dropped inside
     still render readable. That means `var(--ink)` DOES NOT mean "always
     #1C1917" — it means "whatever ink is in this context".

     For absolute-dark surfaces that must stay dark regardless of context
     (e.g. a scope-card header strip sitting inside a dark trade section),
     use `--ink-fixed` / `--ink-black-fixed`. These are NEVER rebound.
     ──────────────────────────────────────────────────────────────────────── */
  --ink:           #1C1917;   /* semantic primary ink (REBOUND in dark sections) */
  --ink-dark:      #292524;   /* mid-stop for hero gradients + tab-trade        */
  --ink-light:     #44403c;   /* trust-page secondary surfaces                  */
  --ink-black:     #0F0E0C;   /* deep trade hero base                           */

  /* Absolute-dark anchors — NEVER rescoped. Use inside dark-inverted
     sections where you need "always dark" regardless of surroundings. */
  --ink-fixed:       #1C1917;
  --ink-black-fixed: #0F0E0C;
  --ink-dark-fixed:  #292524;

  /* ── Warm neutrals ──────────────────────────────────────────────────── */
  --cream:      #FAF8F4;
  --cream-dk:   #F0EBE3;
  --stone:      #57534E;   /* body copy                                    */
  --muted:      #A8A29E;   /* secondary text                               */
  --border:     #E7E1D8;   /* default divider                              */
  --card:       #FFFFFF;   /* default card background                      */
  --card-solid: #FFFFFF;   /* opaque alias for card                        */

  /* Absolute-cream anchor — never rescoped. Use on dark pills or badges
     that must keep cream regardless of their parent context. */
  --cream-fixed: #FAF8F4;

  /* ── Terracotta (primary accent) ────────────────────────────────────── */
  --terra:      #DA654D;
  --terra-dk:   #C8533C;
  --terra-lt:   #FDF0ED;
  --terracotta: var(--terra);    /* alias — story pages use this name     */
  --terracotta-dk: var(--terra-dk);
  --terracotta-lt: var(--terra-lt);

  /* ── Teal (escrow / released / trust) ──────────────────────────────── */
  --teal:       #115E59;
  --teal-dk:    #0D4F47;
  --teal-lt:    #ECFDF5;

  /* ── Semantic colors ────────────────────────────────────────────────── */
  --amber:      #F59E0B;
  --amber-dk:   #92400E;
  --amber-lt:   #FFFBEB;
  --green:      #10B981;
  --green-dk:   #166534;
  --green-lt:   #ECFDF5;
  --red:        #E53E3E;
  --red-lt:     #FEE2E2;

  /* ── Platform colors (WhatsApp, etc.) ──────────────────────────────── */
  --wa-green:   #25D366;
  --wa-green-dk:#1EB853;

  /* ── Radius scale — Leo canonical is --r (6px) ─────────────────────── */
  --r:          6px;
  --r-xs:       3px;
  --r-sm:       6px;
  --r-md:       8px;
  --r-lg:       14px;
  --r-xl:       20px;
  --r-pill:     999px;

  /* Semantic card radii (use these on new code, not raw --r*) */
  --card-radius:          var(--r);     /* default card / button / input */
  --card-radius-feature:  var(--r-lg);  /* feature / marketing-hero card  */
  --modal-radius:         var(--r-xl);  /* bottom-sheet / modal          */

  /* ── Typography ─────────────────────────────────────────────────────── */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Source Sans 3', system-ui, sans-serif;

  /* Semantic font roles (use on new code; raw --serif/--sans still supported) */
  --font-display:  var(--serif);   /* h1 hero headline                    */
  --font-heading:  var(--serif);   /* h2, h3                              */
  --font-body:     var(--sans);    /* everything else                     */

  /* ── Scrim / overlay ramps — recurring RGBA patterns as tokens ─────── */
  /* White scrims (text, borders, overlays on dark surfaces) */
  --scrim-white-08: rgba(255,255,255,.08);
  --scrim-white-12: rgba(255,255,255,.12);
  --scrim-white-15: rgba(255,255,255,.15);
  --scrim-white-55: rgba(255,255,255,.55);
  --scrim-white-65: rgba(255,255,255,.65);
  --scrim-white-92: rgba(255,255,255,.92);
  /* Black scrims (shadows, overlays on light surfaces) */
  --scrim-black-04: rgba(0,0,0,.04);
  --scrim-black-06: rgba(0,0,0,.06);
  --scrim-black-08: rgba(0,0,0,.08);
  --scrim-black-12: rgba(0,0,0,.12);
  --scrim-black-25: rgba(0,0,0,.25);
  --scrim-black-35: rgba(0,0,0,.35);
  --scrim-black-45: rgba(0,0,0,.45);
  --scrim-black-55: rgba(0,0,0,.55);

  /* ── Shadow ladder — tier the in-the-wild shadows as named tokens ─── */
  --shadow-header-light: 0 1px 4px var(--scrim-black-04);
  --shadow-header-dark:  0 1px 4px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.3);
  --shadow-card:         0 4px 16px var(--scrim-black-08);
  --shadow-card-hover:   0 8px 30px var(--scrim-black-08);
  --shadow-modal:        0 24px 80px var(--scrim-black-45), 0 0 0 1px rgba(255,255,255,.04) inset;
  --shadow-dropdown:     0 4px 20px var(--scrim-black-12);
  --shadow-glass-light:  0 8px 32px var(--scrim-black-08), inset 0 1px 0 rgba(255,255,255,.8);
  --shadow-glass-dark:   0 8px 32px var(--scrim-black-25), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-hero-cta:     0 4px 24px var(--scrim-black-25);
  --shadow-focus-terra:  0 0 0 3px rgba(218,101,77,.18);

  /* ── Semantic card presets — compose in CSS: background, border, radius ─
     `--card-bg-dark` uses `--ink-fixed` so that a dark header strip still
     renders dark even when its parent section has rebound `--ink` to cream
     (as `.tab-area-trade` does for dark-mode inversion).
     ──────────────────────────────────────────────────────────────────────── */
  --card-bg:           var(--card);
  --card-bg-muted:     var(--cream-dk);
  --card-bg-dark:      var(--ink-fixed);
  --card-border:       var(--border);
  --card-border-dark:  var(--scrim-white-12);
  --card-text:         var(--ink);
  --card-text-dark:    var(--cream);
}

/* ── Typography utility classes ──────────────────────────────────────────
   Shared heading patterns extracted from the landing pages so card titles
   stop re-declaring Playfair, size, and weight inline. Apply these to an
   `<h3>` (NOT a div) so the heading rule is satisfied automatically.

   When a card header sits on a dark band (`background:var(--ink)`), use
   `.card-title-on-dark` which flips color to cream.
   ──────────────────────────────────────────────────────────────────────── */
.card-title,
h3.card-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.card-title-sm,
h3.card-title-sm {
  margin: 0 0 3px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.card-title-on-dark,
h3.card-title-on-dark {
  margin: 0 0 2px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}
.display-num {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}