/* =========================================================================
   BashMaps — Design Tokens — Editorial × Archival v3
   Reconciled palette: navy brand anchor + near-black + slate + gold/orange accent
   ========================================================================= */


:root {
  /* ---------- PALETTE ---------- */
  /* Brand navy — primary dark surface. Always present. */
  --navy:           #1d2858;
  --navy-2:         #253070;   /* hover / lifted navy */
  --navy-deep:      #131c3e;   /* deeper navy for contrast within navy sections */

  /* Near-black — deep dark for text, footers, contrast moments */
  --carbon:         #231f20;

  /* Slate — secondary text, dividers, muted elements */
  --slate:          #6d707c;

  /* Obsidian — true dark, used sparingly for maximum contrast moments */
  --obsidian:       #0d0d10;

  /* Light surface — pearl warm white */
  --pearl:          #F5F0E1;
  --pearl-deep:     #EDE7D1;   /* slightly deeper pearl for contrast on light */

  /* Brand accents — keep gold and orange, use sparingly */
  /* Gold tones — warmed toward orange (Z 2026-05-07: shift toward brand orange,
     keep metallic gradient feel but swap champagne for amber/copper). */
  --gold:           #E0913C;   /* mid amber — anchors gradients */
  --gold-hi:        #F5BE7C;   /* light peach/amber — top of gradient */
  --gold-lo:        #9A4F18;   /* burnt copper — bottom of gradient */
  --orange:         #D4671A;   /* signal only — CTAs, live indicators */

  /* Border/divider — derived from new amber gold @ 28% opacity */
  --line:           rgba(224,145,60,0.28);
  --line-light:     rgba(109,112,124,0.2);   /* for light sections */

  /* ---------- LEGACY ALIASES (keeps existing components working) ---------- */
  --bm-navy:        var(--navy);
  --bm-navy-deep:   var(--navy-deep);
  --bm-navy-soft:   var(--navy-2);
  --bm-near-black:  var(--carbon);
  --bm-black:       var(--obsidian);
  --bm-gray:        rgba(245,240,225,0.4);
  --bm-gray-light:  rgba(245,240,225,0.55);
  --bm-gray-dark:   rgba(201,169,97,0.2);
  --bm-white:       var(--pearl);
  --bm-off-white:   rgba(245,240,225,0.85);
  --bm-orange:      var(--orange);
  --bm-orange-hot:  #e07830;
  --bm-orange-deep: #b85716;
  --bm-gold:        var(--gold);
  --bm-gold-soft:   var(--gold-hi);
  --bm-gold-deep:   var(--gold-lo);

  /* ---------- SURFACES ---------- */
  --bg-canvas:      var(--navy);       /* primary dark surface is brand navy */
  --bg-surface:     var(--navy-deep);  /* inset cards on dark sections */
  --bg-surface-2:   var(--carbon);     /* near-black cards */
  --bg-hero:        var(--navy);
  --bg-light:       var(--pearl);      /* editorial light sections */

  /* ---------- TEXT — DARK SURFACES ---------- */
  --fg-1:           var(--pearl);
  --fg-2:           rgba(245,240,225,0.65);
  --fg-3:           rgba(245,240,225,0.4);
  --fg-on-orange:   var(--pearl);
  --fg-on-gold:     var(--carbon);

  /* ---------- TEXT — LIGHT SURFACES ---------- */
  --fg-light-1:     var(--carbon);     /* primary text on pearl */
  --fg-light-2:     var(--slate);      /* secondary text on pearl */
  --fg-light-3:     rgba(109,112,124,0.6);

  /* ---------- BORDERS ---------- */
  --border-1:       var(--line);
  --border-2:       rgba(201,169,97,0.4);
  --border-3:       rgba(201,169,97,0.6);

  /* ---------- TYPOGRAPHY ---------- */
  /* Display / Anchor — Big Shoulders Display 900. The RC brand voice. */
  --font-display:   'Big Shoulders Display', 'Arial Black', Impact, sans-serif;
  --font-anchor:    'Big Shoulders Display', 'Arial Black', Impact, sans-serif;
  /* Body / UI — Inter */
  --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Mono — eyebrows, spec data, labels */
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --text-display:   clamp(72px, 14vw, 180px);
  --text-h1:        clamp(52px, 9vw, 120px);
  --text-h2:        clamp(36px, 5vw, 64px);
  --text-h3:        clamp(22px, 2.8vw, 32px);
  --text-h4:        18px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-body-sm:   14px;
  --text-caption:   12px;
  --text-eyebrow:   11px;

  /* Weights */
  --w-display:      300;   /* Cormorant Garamond Light for display */
  --w-bold:         700;
  --w-semibold:     600;
  --w-medium:       500;
  --w-regular:      400;
  --w-light:        300;

  /* Line heights */
  --lh-tight:       0.88;
  --lh-snug:        1.0;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.22em;

  /* ---------- SPACING (4px base grid) ---------- */
  --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;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:          0 12px 32px rgba(0,0,0,0.5);
  --shadow-glow-gold:   0 4px 24px rgba(201,169,97,0.25);
  --shadow-glow-orange: 0 4px 24px rgba(212,103,26,0.35);
  --shadow-inset-top:   inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================= */

/* Display: Big Shoulders Display 900 — the RC brand anchor */
.bm-display {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.bm-h1 {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: var(--text-h1);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.bm-h2 {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* On light sections, h2 uses dark text */
.bm-section-light .bm-h2 {
  color: var(--fg-light-1);
}

.bm-h3 {
  font-family: var(--font-anchor);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.bm-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: 0.01em;
}

.bm-body-lg {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.bm-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.bm-body-sm {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.bm-caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  color: var(--fg-3);
}

/* Eyebrow: JetBrains Mono, always gold on dark / slate on light */
.bm-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-3); /* consistent gap to headline across all sections */
}
.bm-eyebrow::before {
  content: '•';
  background: none;
  width: auto;
  height: auto;
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
.bm-section-light .bm-eyebrow {
  color: var(--gold-lo);
}
.bm-section-light .bm-eyebrow::before {
  background: none;
}

.bm-pro-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line);
  padding: 3px 8px;
  display: inline-block;
  vertical-align: middle;
}

/* Gold headline for specific moments */
.headline-gold {
  background: linear-gradient(180deg,
    var(--gold-hi) 0%,
    var(--gold)    35%,
    var(--gold-lo) 50%,
    var(--gold)    65%,
    var(--gold-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}