/* ============================================================
   Mulligan Funding Reserve — Brand Tokens
   Sub-brand: premium credit line product
   Source: Reserve Brand Guidelines PDF (Canva, Apr 2026) + logos
   ============================================================ */

/* Google Fonts — Cinzel (serif for RESERVE wordmark) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

:root {

  /* ── Reserve Gold Palette — 8 steps ────────────────────────────
     Source: Mulligan Funding Reserve Brand Guidelines (Apr 2026)
     1. #E5DCC6  R:229 G:220 B:198  — cream (lightest)
     2. #CBB88E  R:203 G:184 B:142  — light tan
     3. #BAA168  R:186 G:161 B:104  — light gold
     4. #A98942  R:169 G:137 B:66   — MAIN COLOR
     5. #987B3B  R:152 G:123 B:59   — dark gold / brand bg
     6. #876E35  R:135 G:110 B:53   — darker gold
     7. #76602E  R:118 G:96  B:46   — deep gold
     8. #554521  R:85  G:69  B:33   — darkest brown-gold
  ──────────────────────────────────────────────────────────── */
  --reserve-gold-1:         #E5DCC6;   /* cream — lightest */
  --reserve-gold-2:         #CBB88E;   /* light tan */
  --reserve-gold-3:         #BAA168;   /* light gold */
  --reserve-gold-4:         #A98942;   /* MAIN COLOR */
  --reserve-gold-5:         #987B3B;   /* dark gold / brand bg */
  --reserve-gold-6:         #876E35;   /* darker gold */
  --reserve-gold-7:         #76602E;   /* deep gold */
  --reserve-gold-8:         #554521;   /* darkest brown-gold */

  /* Semantic aliases — map steps to roles */
  --reserve-gold:           #A98942;   /* = step 4, primary */
  --reserve-gold-dark:      #987B3B;   /* = step 5 */
  --reserve-gold-darker:    #76602E;   /* = step 7 */
  --reserve-gold-light:     #BAA168;   /* = step 3 */
  --reserve-gold-lighter:   #CBB88E;   /* = step 2 */
  --reserve-gold-pale:      #E5DCC6;   /* = step 1 */

  /* Gradient endpoints (matches logo M-mark metallic sheen) */
  --reserve-gold-grad-hi:   #BAA168;
  --reserve-gold-grad-lo:   #987B3B;
  --reserve-gold-grad:      linear-gradient(135deg, #BAA168 0%, #A98942 45%, #987B3B 100%); /* @kind color */

  /* ── Reserve Neutrals (dark-mode first) ───────────────────── */
  --reserve-ink:            #0F0D0B;
  --reserve-ink-2:          #1C1814;
  --reserve-ink-3:          #2A2520;
  --reserve-ink-4:          #3D3730;
  --reserve-bg-default:     var(--color-bg-dark);   /* #07222B — dark teal, standard MF dark bg */
  --reserve-smoke:          #7A7065;
  --reserve-ash:            #A89E93;
  --reserve-cream:          #F5EDD8;
  --reserve-white:          #FDFAF4;

  /* ── Typography ──────────────────────────────────────────────
     Display/wordmark: Cinzel (classical serif, wide-tracked)
     Body: Cormorant Garamond (elegant editorial serif)
     UI: Montserrat (same as core MF brand)                    */
  /* Brand spec: Trajan Pro 3 (licensed desktop/print font).
     Web substitute: Cinzel (Google Fonts) — confirmed visual match. */
  --reserve-font-display: 'Cinzel', 'Trajan Pro 3', 'Trajan Pro', Georgia, serif;
  --reserve-font-body:    'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --reserve-font-ui:      'Montserrat', -apple-system, sans-serif;

  --reserve-font-weight-light:    300;
  --reserve-font-weight-regular:  400;
  --reserve-font-weight-medium:   500;
  --reserve-font-weight-semibold: 600;
  --reserve-font-weight-bold:     700;
  --reserve-font-weight-black:    900;

  /* ── Type Scale ──────────────────────────────────────────── */
  --reserve-font-size-hero:    56px;
  --reserve-font-size-h1:      40px;
  --reserve-font-size-h2:      32px;
  --reserve-font-size-h3:      24px;
  --reserve-font-size-h4:      20px;
  --reserve-font-size-p1:      20px;
  --reserve-font-size-p2:      17px;
  --reserve-font-size-p3:      14px;
  --reserve-font-size-label:   11px;

  --reserve-letter-spacing-wordmark: 0.22em;
  --reserve-letter-spacing-label:    0.14em;
  --reserve-letter-spacing-body:     0.02em;

  /* ── Borders & Radius ────────────────────────────────────── */
  --reserve-radius-sm:   2px;
  --reserve-radius-md:   4px;
  --reserve-radius-lg:   8px;
  --reserve-border-gold: 1px solid var(--reserve-gold);
  --reserve-border-dim:  1px solid var(--reserve-ink-4);

  /* ── Shadows ─────────────────────────────────────────────── */
  --reserve-shadow-gold: 0 2px 24px rgba(176, 138, 28, 0.25);
  --reserve-shadow-card: 0 4px 32px rgba(0, 0, 0, 0.45);
  --reserve-shadow-glow: 0 0 40px rgba(212, 185, 106, 0.20);

  /* ── Semantic aliases ────────────────────────────────────── */
  --reserve-bg-page:      var(--reserve-bg-default);   /* #987B3B — brand bg */
  --reserve-bg-card:      var(--reserve-ink-2);
  --reserve-bg-elevated:  var(--reserve-ink-3);
  --reserve-text-primary: var(--reserve-gold);
  --reserve-text-body:    var(--reserve-cream);
  --reserve-text-muted:   var(--reserve-ash);
  --reserve-text-inverse: var(--reserve-ink);
  --reserve-accent:       var(--reserve-gold);
  --reserve-accent-hover: var(--reserve-gold-light);
}