/* =============================================================
 * G. LENDING — Premium Light Direction (Galindo Group kinship)
 * Tokens: palette, type, spacing, motion
 *
 * 10/1/2026 (Luis, relaying the client): match the Galindo Group
 * Real Estate site. WHITE / IVORY-GREY / BLACK with GOLD as the
 * only accent. NO RED anywhere. Wide heavy grotesque display caps
 * (Special Gothic Expanded), tracked-out small caps for labels,
 * square corners, airy spacing. Dark surfaces only as accents
 * (hero photo, one stats/CTA band, footer).
 *
 * The semantic names below are what every page's inline <style>
 * consumes, so flipping them here re-skins the whole site.
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&family=Special+Gothic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── BRAND ─────────────────────────────────────────────── */
  /* "--red" is the legacy accent slot every page references.
     It now carries the Galindo gold. There is no red on the site. */
  --red:           #B68F3F;
  --red-deep:      #9A7733;
  --red-soft:      rgba(182,143,63,0.12);
  --gold:          #B68F3F;
  --gold-light:    #D4B46A;
  --gold-pale:     #F3EAD3;
  --gold-deep:     #9A7733;
  --gold-soft:     #F3EAD3;

  /* ── CORE NEUTRALS ─────────────────────────────────────── */
  --black:         #0A0A0A;
  --ink:           #0A0A0A;       /* primary text */
  --graphite:      #2E2E2E;
  --slate:         #6B6B6B;
  --mist:          #B9B9B9;
  --paper:         #FFFFFF;
  --cream:         #F7F7F7;       /* Galindo's alt-section grey */
  --cream-warm:    #F1F1F1;
  --grey-50:       #FAFAFA;
  --grey-100:      #F3F3F3;
  --grey-200:      #E6E6E6;
  --grey-300:      #C9C9C9;
  --hairline:      rgba(10,10,10,0.10);
  --hairline-strong: rgba(10,10,10,0.22);

  /* ── SEMANTIC TEXT — LIGHT THEME ────────────────────────── */
  --fg-1:          #0A0A0A;       /* primary text on light */
  --fg-2:          #454545;       /* secondary (Galindo body grey) */
  --fg-3:          #767676;       /* tertiary / captions */
  --fg-4:          #A3A3A3;       /* faint */
  --fg-inverse:    #FFFFFF;       /* light text on dark chips/buttons */

  --bg-page:       #FFFFFF;       /* white page */
  --bg-card:       #FFFFFF;       /* card surface */
  --bg-elev:       #F7F7F7;       /* raised / panel */
  --bg-warm:       #F7F7F7;       /* alt section */
  --bg-deep:       #0A0A0A;       /* accent bands (CTA) */
  --bg-deepest:    #000000;
  /* "hairline-dark" is the legacy name for "hairline on the page";
     on the light theme it is a soft black line. */
  --hairline-dark: rgba(10,10,10,0.10);
  --hairline-dark-strong: rgba(10,10,10,0.22);

  /* ── TYPE FAMILIES ─────────────────────────────────────── */
  --font-display:  "Special Gothic Expanded One", "Archivo Black", Impact, system-ui, sans-serif;
  --font-sans:     "Special Gothic", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── TYPE SIZES — wide display face, pulled in ─────────── */
  --t-poster:      clamp(42px, 5.4vw, 92px);
  --t-monumental:  clamp(38px, 4.6vw, 76px);
  --t-display:     clamp(32px, 3.8vw, 60px);
  --t-h1:          clamp(30px, 3.2vw, 54px);
  --t-h2:          clamp(26px, 2.7vw, 44px);
  --t-h3:          22px;
  --t-h4:          19px;
  --t-eyebrow:     11px;
  --t-body-lg:     18px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     13px;
  --t-micro:       11px;

  /* ── SPACING ──────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  --section-y:       clamp(88px, 10vw, 150px);
  --section-y-tight: clamp(64px, 7vw, 100px);

  /* ── RADII — SQUARE (Galindo) ──────────────────────────── */
  --r-none:  0;
  --r-xs:    0;
  --r-sm:    0;
  --r-md:    0;
  --r-lg:    0;
  --r-xl:    0;
  --r-2xl:   0;
  --r-btn:   0;
  --r-card:  0;
  --r-pill:  0;

  /* ── SHADOWS — soft, light theme ───────────────────────── */
  --shadow-1:      0 1px 2px rgba(10,10,10,0.04);
  --shadow-2:      0 10px 30px -12px rgba(10,10,10,0.10);
  --shadow-3:      0 24px 50px -20px rgba(10,10,10,0.14);
  --shadow-card-hover: 0 22px 44px -18px rgba(10,10,10,0.16);

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      520ms;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --max-w:         1440px;
  --max-w-prose:   720px;
  --max-w-narrow:  960px;
  --gutter:        56px;
}

/* ── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--paper); }

/* ── SEMANTIC TYPE CLASSES ─────────────────────────────── */

.t-poster {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-poster);
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-monumental {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-monumental);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.t-body-lg { font-size: var(--t-body-lg); line-height: 1.7; color: var(--fg-2); }
.t-body { font-size: var(--t-body); line-height: 1.7; color: var(--fg-2); }
.t-caption { font-size: var(--t-caption); line-height: 1.5; color: var(--fg-3); }

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  font-feature-settings: "tnum";
  color: var(--fg-1);
}