/* ============================================================
   T.Byrd's Heating & Cooling — Design Tokens
   ============================================================
   CSS custom properties, @font-face, and utility classes.
   Loaded by inc/enqueue.php before tbyrds-main.css.

   NOTE TO DEV TEAM: Convert FrizQuadrataBold.otf (in
   setup-kit/02-tokens/fonts/) to .woff2 + .woff and place
   both files in theme/assets/fonts/ before launch.
   The @font-face below is pre-wired to the correct paths.

   Lock: Bethany Singh, Thrive Digital, 2026-05-23.
============================================================ */

@font-face {
  font-family: 'Friz Quadrata Bold';
  src: url('../fonts/FrizQuadrataBold.woff2') format('woff2'),
       url('../fonts/FrizQuadrataBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============================================================
     COLOR PALETTE — Locked. See reference/brand-palette.md.
     ============================================================ */

  /* Cream (#FFF6DC) — primary section background, default surface */
  --tb-paper: #FFF6DC;
  --tb-paper-warm: #F8EDC9;       /* subtle hover state on light cards */

  /* Brand Grey (#3D3F3F) — body text + most headlines */
  --tb-ink: #3D3F3F;
  --tb-ink-deep: #2B2C2C;          /* darker variant for high-contrast bands */

  /* Scenery Green (#696859) — Trust Band, Final CTA, Promises section */
  --tb-ink-soft: #696859;

  /* Linen (#CBC0AA) — Reviews section, Service Area section */
  --tb-linen: #CBC0AA;
  --tb-linen-warm: #D6CBB5;

  /* Antique Gold (#C39954) — accent only. NEVER body text. */
  --tb-gold: #C39954;
  --tb-gold-aged: #A8854A;          /* restrained variant */

  /* Cardinal Red (#B53A2A) — the exclamation point. Sparingly. */
  --tb-accent: #B53A2A;

  /* Rule colors (hairlines, separators) */
  --tb-rule: rgba(61, 63, 63, .14);
  --tb-rule-strong: rgba(61, 63, 63, .32);
  --tb-rule-gold: rgba(195, 153, 84, .32);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --tb-font-display: 'Friz Quadrata Bold', 'Cinzel', serif;
  --tb-font-body:    'Fraunces', Georgia, serif;
  --tb-font-mono:    'Geist Mono', 'IBM Plex Mono', monospace;

  /* Type scale */
  --tb-text-h1:          clamp(48px, 5.4vw, 80px);
  --tb-text-h2:          clamp(36px, 4vw, 56px);
  --tb-text-h3:          clamp(26px, 2.8vw, 36px);
  --tb-text-display-sm:  clamp(24px, 2.8vw, 40px);
  --tb-text-display-mid: clamp(28px, 3vw, 38px);
  --tb-text-body:        17.5px;
  --tb-text-body-sm:     15.5px;
  --tb-text-meta:        13px;
  --tb-text-eyebrow:     11px;
  --tb-text-utility:     10.5px;

  /* Line heights */
  --tb-lh-display: .95;
  --tb-lh-heading: 1.1;
  --tb-lh-body:    1.6;
  --tb-lh-tight:   1.35;

  /* Letter spacing */
  --tb-ls-display:  .005em;
  --tb-ls-eyebrow:  .22em;
  --tb-ls-utility:  .2em;
  --tb-ls-button:   .16em;

  /* ============================================================
     SPACING / LAYOUT
     ============================================================ */
  --tb-space-section:       80px;
  --tb-space-section-tight: 56px;
  --tb-space-section-loose: 96px;
  --tb-space-block:         32px;
  --tb-space-gap:           24px;
  --tb-space-gap-sm:        14px;
  --tb-space-gap-xs:        8px;

  --tb-pad-side-desktop: 56px;
  --tb-pad-side-tablet:  40px;
  --tb-pad-side-mobile:  22px;

  --tb-container-max: 1440px;
  --tb-content-max:   1320px;
  --tb-text-max:      70ch;
  --tb-text-narrow:   48ch;

  /* ============================================================
     BORDERS / SHADOWS
     ============================================================ */
  --tb-border-hairline: 1px solid var(--tb-rule);
  --tb-border-rule:     1px solid var(--tb-rule-strong);
  --tb-border-gold:     1px solid var(--tb-gold-aged);
  --tb-shadow-page:     0 40px 100px -40px rgba(0, 0, 0, .45);
  --tb-shadow-soft:     0 24px 60px -32px rgba(43, 44, 44, .22);

  /* ============================================================
     ANIMATION
     ============================================================ */
  --tb-transition-fast: .15s ease;
  --tb-transition:      .2s ease;
  --tb-transition-slow: .25s ease;
}


/* ============================================================
   GLOBAL RESETS + BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }

body {
  background: var(--tb-ink);
  color: var(--tb-ink);
  font-family: var(--tb-font-body);
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; transition: color var(--tb-transition-fast); }
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tb-font-display);
  font-weight: 700;
  letter-spacing: var(--tb-ls-display);
  text-transform: uppercase;
  color: var(--tb-ink);
}

/* Page wrapper — all templates use .page */
.page {
  max-width: var(--tb-container-max);
  margin: 0 auto;
  background: var(--tb-paper);
  box-shadow: var(--tb-shadow-page);
  overflow: hidden;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Eyebrow (small caps, mono, gold-aged) */
.tb-eyebrow {
  font-family: var(--tb-font-mono);
  font-size: var(--tb-text-eyebrow);
  letter-spacing: var(--tb-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tb-ink-soft);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tb-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--tb-gold-aged);
}
.tb-eyebrow.on-dark { color: var(--tb-gold); }
.tb-eyebrow.on-dark::before { background: var(--tb-gold); }

/* Display headings */
.tb-display {
  font-family: var(--tb-font-display);
  font-weight: 700;
  letter-spacing: var(--tb-ls-display);
  text-transform: uppercase;
  line-height: var(--tb-lh-heading);
  color: var(--tb-ink);
  margin: 0;
}
.tb-display em {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tb-gold-aged);
}

/* Body copy */
.tb-body {
  font-family: var(--tb-font-body);
  font-size: var(--tb-text-body);
  line-height: var(--tb-lh-body);
  color: var(--tb-ink);
}

/* Buttons */
.tb-btn {
  font-family: var(--tb-font-mono);
  font-size: var(--tb-text-utility);
  font-weight: 600;
  padding: 12px 20px;
  background: var(--tb-ink);
  color: var(--tb-paper);
  border: 1px solid var(--tb-ink);
  cursor: pointer;
  letter-spacing: var(--tb-ls-button);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--tb-transition);
  white-space: nowrap;
  text-decoration: none;
}
.tb-btn:hover { background: var(--tb-gold); border-color: var(--tb-gold); color: var(--tb-ink); }
.tb-btn--gold { background: var(--tb-gold); color: var(--tb-ink); border-color: var(--tb-gold); }
.tb-btn--gold:hover { background: var(--tb-ink); color: var(--tb-paper); }
.tb-btn--outline { background: transparent; color: var(--tb-ink); border-color: var(--tb-ink); }
.tb-btn--outline-light { background: transparent; color: var(--tb-paper); border-color: var(--tb-paper); }
.tb-btn--outline-light:hover { background: var(--tb-paper); color: var(--tb-ink); }