/* ============================================================
   RICH BEFORE THE MONEY — Core Foundations
   Colors + Typography tokens. Import everywhere.
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Bebas Neue is the closest match for the condensed all-caps tagline. */
/* Caveat Brush is the closest free match for the "Rich" brush script. */
/* DM Sans / Manrope cover the editorial body needs. */
/* Editorial italic for the manifesto coda — replaces the brush script. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat+Brush&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ============================================
     COLORS — anchored to the black/white logo,
     with a champagne gold + ivory for "wealth"
     accent and a deep money green for callouts.
     ============================================ */

  /* Core mono — these do 90% of the work */
  --rbm-ink:        #0A0A0A;  /* near-black; brand black */
  --rbm-ink-soft:   #1A1A1A;  /* one step up from pure black, for cards on black */
  --rbm-ink-line:   #2A2A2A;  /* subtle hairlines on black backgrounds */
  --rbm-bone:       #F5F1EA;  /* warm off-white — "ivory" alternative to pure white */
  --rbm-bone-soft:  #ECE6DB;  /* ivory tinted slightly cooler for surfaces */
  --rbm-paper:      #FFFFFF;  /* pure white — use sparingly, mainly for product */

  /* Greys */
  --rbm-grey-900:   #111111;
  --rbm-grey-800:   #1F1F1F;
  --rbm-grey-700:   #2E2E2E;
  --rbm-grey-500:   #6B6B6B;
  --rbm-grey-300:   #B5B0A7;  /* warm grey to match ivory */
  --rbm-grey-200:   #D6D1C6;
  --rbm-grey-100:   #E8E3D8;

  /* Accents — used sparingly, for emphasis only */
  --rbm-gold:       #C9A961;  /* primary accent — champagne gold */
  --rbm-gold-deep:  #8E7438;  /* shadow / hover state */
  --rbm-gold-light: #E4CB8F;  /* highlight */
  --rbm-money:      #1F5E3A;  /* deep, mature green — for "money" callouts */
  --rbm-blood:      #8B1E1E;  /* deep accent red — sparingly, for stamps/marks */

  /* Semantic */
  --rbm-fg:         var(--rbm-bone);
  --rbm-fg-muted:   var(--rbm-grey-300);
  --rbm-fg-dim:     var(--rbm-grey-500);
  --rbm-bg:         var(--rbm-ink);
  --rbm-bg-elev:    var(--rbm-ink-soft);
  --rbm-line:       var(--rbm-ink-line);
  --rbm-accent:     var(--rbm-gold);

  /* "Light mode" reverses */
  --rbm-fg-on-bone: var(--rbm-ink);
  --rbm-bg-on-bone: var(--rbm-bone);

  /* ============================================
     TYPOGRAPHY
     Display = brush script (logo echo)
     Headline = condensed all-caps (tagline echo)
     Body = clean humanist sans
     ============================================ */

  --rbm-font-script:   'Caveat Brush', 'Permanent Marker', cursive;
  --rbm-font-editorial:'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --rbm-font-headline: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --rbm-font-body:     'DM Sans', 'Manrope', system-ui, sans-serif;
  --rbm-font-mono:     'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale — designed for editorial / one-sheet layouts */
  --rbm-size-display: clamp(64px, 9vw, 144px);
  --rbm-size-h1:      clamp(48px, 6vw, 96px);
  --rbm-size-h2:      clamp(36px, 4.5vw, 64px);
  --rbm-size-h3:      28px;
  --rbm-size-h4:      20px;
  --rbm-size-body:    16px;
  --rbm-size-small:   13px;
  --rbm-size-micro:   11px;

  /* Spacing scale — 4px base */
  --rbm-s-1:  4px;
  --rbm-s-2:  8px;
  --rbm-s-3:  12px;
  --rbm-s-4:  16px;
  --rbm-s-5:  24px;
  --rbm-s-6:  32px;
  --rbm-s-7:  48px;
  --rbm-s-8:  64px;
  --rbm-s-9:  96px;
  --rbm-s-10: 128px;

  /* Radii — kept VERY sharp; brand is editorial, not soft */
  --rbm-r-0: 0;
  --rbm-r-1: 2px;
  --rbm-r-2: 4px;
  --rbm-r-pill: 999px;

  /* Borders */
  --rbm-border: 1px solid var(--rbm-line);
  --rbm-border-bold: 2px solid var(--rbm-ink);
  --rbm-border-rule: 4px solid var(--rbm-ink);

  /* Shadows — minimal, brand is mostly flat / printed */
  --rbm-shadow-card: 0 12px 32px -16px rgba(0,0,0,0.4);
  --rbm-shadow-press: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Semantic classes ---------- */

.rbm-display {
  font-family: var(--rbm-font-script);
  font-size: var(--rbm-size-display);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.01em;
}

.rbm-h1 {
  font-family: var(--rbm-font-headline);
  font-size: var(--rbm-size-h1);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rbm-h2 {
  font-family: var(--rbm-font-headline);
  font-size: var(--rbm-size-h2);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rbm-h3 {
  font-family: var(--rbm-font-headline);
  font-size: var(--rbm-size-h3);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rbm-eyebrow {
  font-family: var(--rbm-font-body);
  font-size: var(--rbm-size-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.rbm-body {
  font-family: var(--rbm-font-body);
  font-size: var(--rbm-size-body);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

.rbm-body-lg {
  font-family: var(--rbm-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.rbm-lede {
  font-family: var(--rbm-font-body);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.rbm-small {
  font-family: var(--rbm-font-body);
  font-size: var(--rbm-size-small);
  line-height: 1.45;
}

.rbm-pull-quote {
  font-family: var(--rbm-font-script);
  font-size: 56px;
  line-height: 1;
}

/* Utility */
.rbm-rule { height: 4px; background: var(--rbm-ink); border: 0; margin: var(--rbm-s-5) 0; }
.rbm-rule.on-bone { background: var(--rbm-ink); }
.rbm-rule.on-ink { background: var(--rbm-bone); }