/* ============================================================
   23 WEST FINANCE — Colors & Type
   Premium financial services. Gold / Black / White / Bone.
   Ported from project/colors_and_type.css. Fonts are loaded via
   <link> tags in includes/header.php (preconnect) rather than
   @import, for performance.
   ============================================================ */

:root {
  /* ---------- COLOR — Brand core ---------- */
  --gold-deep:        #A87D3C;   /* bronze edge of the logo gradient */
  --gold:             #C9A155;   /* primary gold — buttons, accents */
  --gold-light:       #E8D188;   /* champagne — highlights, hovers */
  --gold-pale:        #F5EAC8;   /* faintest gold — wash backgrounds */

  /* Gold gradient that matches the logo mark (bronze → champagne) */
  --gold-gradient:    linear-gradient(135deg, #A87D3C 0%, #C9A155 45%, #E8D188 100%);
  --gold-gradient-soft: linear-gradient(135deg, #C9A155 0%, #E8D188 100%);

  /* ---------- COLOR — Neutrals ---------- */
  --black:            #000000;
  --onyx:             #1A1A1C;   /* dark surface (logo background) */
  --charcoal:         #2A2A2D;   /* elevated dark surface */
  --graphite:         #3D3D42;   /* dark borders, muted dark text */
  --slate:            #6B6B70;   /* secondary text on light surfaces */
  --silver:           #B8B8BC;   /* disabled text, light borders on dark */
  --mist:             #E4E2DD;   /* dividers on light surfaces */
  --bone:             #F8F5EF;   /* warm off-white page background */
  --paper:            #FBFAF6;   /* slightly warmer card surface */
  --white:            #FFFFFF;

  /* ---------- COLOR — Semantic ---------- */
  --success:          #5B7B4F;
  --warning:          #C97A2B;
  --danger:           #9B3A2E;
  --info:             #4A6B82;

  /* ---------- COLOR — Foreground / Background tokens ---------- */
  --fg-1:             var(--onyx);
  --fg-2:             var(--graphite);
  --fg-3:             var(--slate);
  --fg-on-dark-1:    var(--white);
  --fg-on-dark-2:    #D9D7D1;
  --fg-on-dark-3:    var(--silver);
  --fg-accent:        var(--gold-deep);
  --fg-accent-dark:   var(--gold-light);

  --bg-page:          var(--bone);
  --bg-surface:       var(--paper);
  --bg-surface-dark:  var(--onyx);
  --bg-surface-darker: var(--black);
  --bg-accent-wash:   var(--gold-pale);

  --border-subtle:    var(--mist);
  --border-strong:    #C9C6C0;
  --border-on-dark:   rgba(232, 209, 136, 0.18);
  --border-gold:      var(--gold);

  /* ---------- TYPE — Families ---------- */
  /* Saira Stencil One is the nearest Google-Fonts match to the logo wordmark.
     It is RESERVED for the wordmark + rare display moments. */
  --font-display:     'Saira Stencil One', 'Stardos Stencil', 'Impact', sans-serif;
  --font-serif:       'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-sans:        'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE — Scale (modular 1.250) ---------- */
  --size-12:  0.75rem;
  --size-14:  0.875rem;
  --size-16:  1rem;
  --size-18:  1.125rem;
  --size-20:  1.25rem;
  --size-24:  1.5rem;
  --size-30:  1.875rem;
  --size-36:  2.25rem;
  --size-48:  3rem;
  --size-60:  3.75rem;
  --size-72:  4.5rem;
  --size-96:  6rem;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (restrained — premium feel, never floaty) ---------- */
  --shadow-xs:  0 1px 2px rgba(26, 26, 28, 0.06);
  --shadow-sm:  0 2px 6px rgba(26, 26, 28, 0.06), 0 1px 2px rgba(26, 26, 28, 0.04);
  --shadow-md:  0 8px 20px rgba(26, 26, 28, 0.08), 0 2px 4px rgba(26, 26, 28, 0.04);
  --shadow-lg:  0 18px 40px rgba(26, 26, 28, 0.10), 0 4px 8px rgba(26, 26, 28, 0.04);
  --shadow-gold-glow: 0 0 0 1px rgba(201, 161, 85, 0.35), 0 8px 24px rgba(168, 125, 60, 0.18);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(232, 209, 136, 0.25);

  /* ---------- TIMING ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — apply these classes directly
   ============================================================ */

.wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}

.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(var(--size-48), 5vw + 1rem, var(--size-96));
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--size-60);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--size-48);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--size-36);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-24);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-18);
  line-height: 1.35;
  color: var(--fg-1);
}

.p, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-16);
  line-height: 1.6;
  color: var(--fg-2);
}
.p-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-20);
  line-height: 1.55;
  color: var(--fg-2);
}
.p-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-14);
  line-height: 1.55;
  color: var(--fg-3);
}

.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--size-30);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-12);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-accent);
}
.eyebrow-on-dark {
  color: var(--fg-accent-dark);
}

.label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-14);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

.mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.005em;
}

/* Numerics — tabular for financial figures. ALWAYS use for currency. */
.numeric {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}