/* ============================================================
   LEAD FROM THE HEART — Design Tokens
   tokens.css  ·  Apply to every page for brand consistency
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */
@font-face { font-family:'Gilmer'; src:url('fonts/gilmer-thin.otf') format('opentype'); font-weight:100; font-display:swap; }
@font-face { font-family:'Gilmer'; src:url('fonts/gilmer-light.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Gilmer'; src:url('fonts/gilmer-regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Gilmer'; src:url('fonts/gilmer-medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Gilmer'; src:url('fonts/gilmer-bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Gilmer'; src:url('fonts/gilmer-heavy.otf') format('opentype'); font-weight:800; font-display:swap; }

/* ── COLOR PALETTE ──────────────────────────────────────────── */
:root {
  /* Reds */
  --red-900: #6B0000;
  --red-800: #8A0000;
  --red-700: #A00000;
  --red-600: #B40000;   /* Brand primary */
  --red-500: #CC1A1A;
  --red-100: #FAE8E8;
  --red-50:  #FEF5F5;

  /* Golds */
  --gold-700: #A37200;
  --gold-600: #C9961A;   /* Brand accent */
  --gold-500: #E0AE30;
  --gold-400: #F0C84A;
  --gold-100: #FDF3D0;

  /* Neutrals */
  --black:      #0D0D0D;
  --charcoal:   #1A1A1A;
  --grey-700:   #3D3D3D;
  --grey-600:   #4F4F4F;
  --grey-500:   #6B6B6B;
  --grey-400:   #9B9B9B;
  --grey-300:   #C4C0BB;
  --grey-200:   #E8E3DC;
  --grey-100:   #F2EDE8;
  --cream:      #FAF6F0;
  --white:      #FFFFFF;
}

/* ── SEMANTIC TOKENS ────────────────────────────────────────── */
:root {
  --brand-primary:       var(--red-600);
  --brand-dark:          var(--red-800);
  --brand-light:         var(--red-100);
  --brand-accent:        var(--gold-600);
  --brand-accent-light:  var(--gold-100);

  --bg-base:   var(--white);
  --bg-soft:   var(--cream);
  --bg-muted:  var(--grey-100);
  --bg-invert: var(--charcoal);
  --bg-brand:  var(--red-600);

  --fg-1:      var(--charcoal);
  --fg-2:      var(--grey-600);
  --fg-3:      var(--grey-400);
  --fg-invert: var(--white);
  --fg-brand:  var(--red-600);
  --fg-accent: var(--gold-600);

  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
:root {
  --font-display: 'Gilmer', 'Inter', Arial, sans-serif;
  --font-body:    'Gilmer', 'Inter', Arial, sans-serif;

  /* Scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  5rem;       /* 80px */

  /* Weights */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   800;

  /* Leading */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-caps:    0.14em;
}

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

  --section-pad: 80px var(--sp-8);
  --section-pad-lg: 96px var(--sp-8);
  --container-max: 1200px;
}

/* ── RADIUS ─────────────────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;
}

/* ── SHADOWS ────────────────────────────────────────────────── */
:root {
  --shadow-xs:    0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.16);
  --shadow-brand: 0 4px 20px rgba(180,0,0,0.22);
}

/* ── TRANSITIONS ────────────────────────────────────────────── */
:root {
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:    200ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;
}

/* ── BUTTON STYLES ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  letter-spacing: 0.01em;
  line-height: 1;
}
.btn:hover  { transform: scale(1.02); }
.btn:active { transform: scale(0.99); }

.btn-primary { background: var(--brand-primary); color: var(--white); padding: 15px 30px; font-size: 15px; }
.btn-primary:hover { background: var(--brand-dark); box-shadow: var(--shadow-brand); }

.btn-primary-lg { background: var(--brand-primary); color: var(--white); padding: 18px 36px; font-size: 16px; }
.btn-primary-lg:hover { background: var(--brand-dark); box-shadow: var(--shadow-brand); }

.btn-outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.5); padding: 14px 28px; font-size: 15px; }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); }

.btn-outline-dark { background: transparent; color: var(--charcoal); border: 2px solid var(--border); padding: 14px 28px; font-size: 15px; }
.btn-outline-dark:hover { border-color: var(--charcoal); }

.btn-white-red { background: var(--white); color: var(--brand-primary); padding: 16px 32px; font-size: 16px; }
.btn-white-red:hover { background: var(--cream); }

/* ── CARD STYLES ────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
}

.card-cream {
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  padding: var(--sp-8);
}

/* ── SECTION LABEL (eyebrow text) ───────────────────────────── */
.section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--w-black);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}

/* ── CONTAINER ──────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-5); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}