/* ════════════════════════════════════════
   JXM DESIGN TOKENS
   Raw custom-property definitions only — no selectors, no component
   styles, no !important. Safe to load on any page without side effects.

   jxm-brand.css imports this file for the full Redox-template pages.
   Bespoke pages that don't use jxm-brand.css (index.html,
   credit-union-growth.html) load this file directly instead, so the
   color/type values stay single-sourced without inheriting
   jxm-brand.css's page-agnostic component overrides.
════════════════════════════════════════ */

:root {
  /* Brand */
  --jxm-tusk:     #f3f1ec;
  --jxm-abyss:    #221F32;
  --jxm-soylent:  #233935;
  --jxm-cedar:    #1c2d20;

  /* Accents */
  --jxm-kermit:   #49e385;
  --jxm-gator:    #2ec470;
  --jxm-nemo:     #FF6464;
  --jxm-fly:      #BDDEED;
  --jxm-blurple:  #5e4ff5;

  /* ════════════ V5 CANONICAL TYPE SCALE ═════════════
     Use these tokens for new headlines + section content. Existing
     inline clamps may be kept where they were tuned for specific
     designs; new work should reference the tokens for consistency. */
  --jxm-fs-display-xl:  clamp(7rem, 22vw, 22rem);     /* hero wordmarks (homepage 'growth') */
  --jxm-fs-display-lg:  clamp(5rem, 17vw, 13rem);     /* marquee-hero row words */
  --jxm-fs-display-md:  clamp(3.5rem, 11vw, 9.5rem);  /* editorial pull-quote / large CTA */
  --jxm-fs-headline:    clamp(2rem, 4.4vw, 3.5rem);   /* section h2 (also brand default) */
  --jxm-fs-subhead:     clamp(1.5rem, 2.4vw, 2rem);   /* card titles / sub-headlines */
  --jxm-fs-lead:        clamp(1.0625rem, 1.4vw, 1.25rem); /* lead paragraph / pull-out body */
  --jxm-fs-body:        1rem;                          /* standard body copy */
  --jxm-fs-meta:        0.875rem;                     /* metadata, captions */
  --jxm-fs-eyebrow:     0.75rem;                      /* mono-caps kicker (set via .section-subtitle override below) */

  /* Dark surfaces */
  --jxm-bg-dark:  #16121f;
  --jxm-bg-deep:  #0a0a0e;

  /* Text on dark */
  --jxm-t1: #ffffff;
  --jxm-t2: rgba(255,255,255,0.85);
  --jxm-t3: rgba(255,255,255,0.65);
  --jxm-t4: rgba(255,255,255,0.45);
  --jxm-t5: rgba(255,255,255,0.30);

  /* Borders on dark */
  --jxm-bd1: rgba(255,255,255,0.07);
  --jxm-bd2: rgba(255,255,255,0.10);
  --jxm-bd3: rgba(255,255,255,0.18);

  /* Text on cream (tusk) */
  --jxm-c-t2: rgba(34,31,50,0.85);
  --jxm-c-t3: rgba(34,31,50,0.55);
  --jxm-c-t4: rgba(34,31,50,0.30);
  --jxm-c-bd: rgba(34,31,50,0.18);
}