/* ==========================================================================
   MHC tokens — elevated treatment
   GENERATED FILE — DO NOT EDIT BY HAND.

   Source:    mhc-wiki/brand/design-tokens.json  v1.0.0 (2026-09-04)
   Generator: mhc-templates/tokens/build-tokens.mjs
   Regenerate: node tokens/build-tokens.mjs

   Treatment: ELEVATED — Selling, luxury, and personal-authority surfaces — restrained, editorial
   Gold permitted: yes, Accent only: rules, ticks, badges, eyebrows, numerals, status tags. Never floods, never backgrounds, never body text.
   Surfaces locked to this treatment:
     · perfecthomesellingprocess.com
     · mhcshowcase.com
     · jerodlee.com
     · perfectrealestateconnection.com (documented exception — not precedent)
     · perfectrealestatebusiness.com + /insights/
     · Luxury Listing YouTube channel + thumbnails
     · TVHS + PREB podcast thumbnails and episode art
     · ILHM / luxury content

   A surface not on that list is classified at its audit by the boundary
   principle, never assumed. If the site you are building is not listed,
   stop and ask — do not pick the treatment that "looks nicer".

   Every literal colour and font value in the pack lives in the :root block
   below and nowhere else. A hex or font-family literal outside :root is a
   design-review FAIL, not a style preference.
   ========================================================================== */

:root {
  /* Core palette */
  --color-red: #C1212B;
  --color-navy: #27387C;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-paper: #FFFFFF;
  --color-ink: #16181F;
  --color-navy-deep: #1D2A5E;
  --color-navy-tint: #E9ECF5;
  --color-red-tint: #F9E9EA;

  /* Semantic roles */
  --text-primary: #16181F;
  --text-inverse: #FFFFFF;
  --color-heading: #27387C;
  --color-link: #27387C;
  --color-link-hover: #C1212B;
  --cta-bg: #C1212B;
  --cta-text: #FFFFFF;
  --cta-secondary-border: #27387C;
  --section-alt-bg: #E9ECF5;
  --footer-bg: #1D2A5E;
  --quick-answer-bg: #E9ECF5;
  --quick-answer-rule: #C1212B;
  --pull-quote-rule: #C1212B;
  --focus-ring: #27387C;
  --color-gold: #D4A843;
  --eyebrow-color: var(--color-gold);
  --eyebrow-on-light: var(--color-navy);
  --accent-rule-color: var(--color-gold);
  --rule-accent: 1px solid #D4A843;

  /* Type families */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', 'Jost', Arial, sans-serif;

  /* Type scale */
  --size-display: clamp(2.5rem, 5vw, 3.75rem);
  --line-display: 1.05;
  --weight-display: 500;
  --ls-display: -0.01em;
  --size-h1: clamp(2rem, 4vw, 3rem);
  --line-h1: 1.1;
  --weight-h1: 500;
  --size-h2: clamp(1.5rem, 3vw, 2.25rem);
  --line-h2: 1.15;
  --weight-h2: 500;
  --size-h3: 1.5rem;
  --line-h3: 1.2;
  --weight-h3: 600;
  --size-h4: 1.25rem;
  --line-h4: 1.3;
  --weight-h4: 600;
  --size-lead: 1.25rem;
  --line-lead: 1.5;
  --weight-lead: 400;
  --size-body: 1.0625rem;
  --line-body: 1.65;
  --weight-body: 400;
  --size-small: 0.9375rem;
  --line-small: 1.5;
  --weight-small: 400;
  --size-eyebrow: 0.8125rem;
  --line-eyebrow: 1.2;
  --weight-eyebrow: 600;
  --ls-eyebrow: 0.12em;
  --size-legal: 0.8125rem;
  --line-legal: 1.5;
  --weight-legal: 400;
  --base-font-size: 16px;
  --measure: 68ch;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --section-pad-mobile: 4rem;
  --section-pad-desktop: 6rem;
  --container-max: 1200px;
  --content-max: 72ch;
  --gutter-mobile: 1.5rem;
  --gutter-desktop: 2rem;

  /* Radii */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);
  --radius-button: var(--radius-none);
  --radius-input: var(--radius-sm);
  --radius-badge: var(--radius-pill);

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(22,24,31,0.06);
  --shadow-md: 0 4px 12px rgba(22,24,31,0.08);
  --shadow-lg: 0 12px 32px rgba(22,24,31,0.12);
  --hero-overlay: linear-gradient(180deg, rgba(29,42,94,0.55) 0%, rgba(29,42,94,0.85) 100%);
  --rule-thin: 1px solid rgba(22,24,31,0.12);
  --rule-brand: 3px solid #C1212B;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 600ms;
  --dur-count: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-rise: 16px;
  --stagger-step: 80ms;
}

/* Elevated: the eyebrow, ticks, badges, numerals and status tags may carry
   gold. Floods, backgrounds and body text may not — treatments.elevated.gold_rule.

   CONTRAST BOUND (color.contrast_minimums, ui_components 3:1): gold #D4A843
   measures 2.21:1 on white and 6.14:1 on navy_deep. So gold TEXT is scoped to
   dark fields, where it clears the minimum, and resolves to ink on light ones.
   The accent role is unchanged — the rules, ticks and numerals still read as
   gold everywhere the surface can carry them. This is the tokens file
   constraining itself: contrast_minimums is a token too, and it outranks a
   colour preference. Flagged to Jerod for ratification, or for a darker gold
   variant intended for light surfaces. */
.eyebrow { color: var(--eyebrow-on-light); }

.section--dark .eyebrow,
.hero--master .eyebrow,
.hero--elevated .eyebrow,
.cta-band--dark .eyebrow,
.site-footer .eyebrow,
.tick,
.badge,
.numeral,
.status-tag { color: var(--eyebrow-color); }

.rule-accent { border: 0; border-top: var(--rule-accent); }

/* Elevated headings sit lighter and larger; the high-contrast serif carries
   the weight, so the type does not need to. */
h1, h2, .h-display { letter-spacing: -0.005em; }