/* =============================================================
   BuyhouseEZ — Colors & Type
   Source of truth for visual tokens.
   Brand colors supplied by BuyhouseEZ:
     Green  #1a9c3d  — primary action / brand mark "buyhouse"
     Navy   #223140  — secondary brand mark "ez", headings
     Grey   #6d6d6d  — supporting text / "FINANCING" wordmark
   ============================================================= */

/* ---------- Fonts ---------- */
/* Century Gothic Pan-European — supplied TTF family.
   Used for EVERYTHING: display, body, UI. Single-family system. */

@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanThin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanLightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanSemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanSemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanBoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic Pan-European";
  src: url("fonts/CenturyGothicPaneuropeanBlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ================================================================
     COLOR TOKENS — raw
     ================================================================ */

  /* Primary — Green (growth, approval, "yes") */
  --bhz-green-50:  #e8f6ec;
  --bhz-green-100: #c6e9d0;
  --bhz-green-200: #8fd3a4;
  --bhz-green-300: #58bd77;
  --bhz-green-400: #34ae57;
  --bhz-green-500: #1a9c3d;  /* brand primary */
  --bhz-green-600: #158234;
  --bhz-green-700: #0f672a;
  --bhz-green-800: #0a4d1f;
  --bhz-green-900: #063314;

  /* Secondary — Navy (authority, trust, stability) */
  --bhz-navy-50:   #eef1f4;
  --bhz-navy-100:  #d2d9df;
  --bhz-navy-200:  #a6b3be;
  --bhz-navy-300:  #7a8d9d;
  --bhz-navy-400:  #4e667d;
  --bhz-navy-500:  #3a4f63;
  --bhz-navy-600:  #2d4051;
  --bhz-navy-700:  #223140;  /* brand secondary */
  --bhz-navy-800:  #182431;
  --bhz-navy-900:  #0e1721;

  /* Neutral — Greys */
  --bhz-grey-50:   #f7f7f7;
  --bhz-grey-100:  #efefef;
  --bhz-grey-200:  #e3e3e3;
  --bhz-grey-300:  #cfcfcf;
  --bhz-grey-400:  #b0b0b0;
  --bhz-grey-500:  #8a8a8a;
  --bhz-grey-600:  #6d6d6d;  /* brand grey */
  --bhz-grey-700:  #555555;
  --bhz-grey-800:  #3a3a3a;
  --bhz-grey-900:  #1f1f1f;

  --bhz-white:     #ffffff;
  --bhz-black:     #0b0f14;

  /* Semantic tints */
  --bhz-success:   var(--bhz-green-500);
  --bhz-warning:   #e2a63b;
  --bhz-danger:    #c0392b;
  --bhz-info:      var(--bhz-navy-500);

  /* ================================================================
     SEMANTIC COLOR ROLES
     ================================================================ */

  /* Surfaces */
  --surface-page:        var(--bhz-white);
  --surface-raised:      var(--bhz-white);
  --surface-sunken:      var(--bhz-grey-50);
  --surface-inverse:     var(--bhz-navy-700);
  --surface-brand:       var(--bhz-green-500);
  --surface-brand-soft:  var(--bhz-green-50);
  --surface-navy-soft:   var(--bhz-navy-50);

  /* Foreground */
  --fg-1: var(--bhz-navy-700);   /* primary text — headings, body on light */
  --fg-2: var(--bhz-grey-700);   /* secondary text */
  --fg-3: var(--bhz-grey-600);   /* tertiary / captions — matches brand grey */
  --fg-4: var(--bhz-grey-400);   /* disabled / placeholder */
  --fg-on-brand:   var(--bhz-white);
  --fg-on-inverse: var(--bhz-white);
  --fg-brand:      var(--bhz-green-500);
  --fg-link:       var(--bhz-green-600);
  --fg-link-hover: var(--bhz-green-700);

  /* Borders */
  --border-subtle:  var(--bhz-grey-200);
  --border-default: var(--bhz-grey-300);
  --border-strong:  var(--bhz-grey-400);
  --border-brand:   var(--bhz-green-500);
  --border-focus:   var(--bhz-green-500);

  /* ================================================================
     TYPE SYSTEM
     ================================================================ */

  --font-sans: "Century Gothic Pan-European", "Century Gothic",
               ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);      /* same family — weight carries distinction */
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Weights (mapped to supplied TTF faces) */
  --fw-thin:       100;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Type scale — marketing/editorial scale (px values, fluid handled downstream) */
  --fs-display-xl:  clamp(3.25rem, 2.4rem + 4.2vw, 5.5rem);   /* 52→88 */
  --fs-display-lg:  clamp(2.5rem,  2.0rem + 2.6vw, 4rem);     /* 40→64 */
  --fs-display-md:  clamp(2.0rem,  1.7rem + 1.6vw, 3rem);     /* 32→48 */
  --fs-h1:          clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);   /* 28→40 */
  --fs-h2:          clamp(1.5rem,  1.35rem + 0.8vw, 2rem);    /* 24→32 */
  --fs-h3:          1.375rem;  /* 22 */
  --fs-h4:          1.125rem;  /* 18 */
  --fs-body-lg:     1.125rem;  /* 18 */
  --fs-body:        1rem;      /* 16 */
  --fs-body-sm:     0.9375rem; /* 15 */
  --fs-caption:     0.8125rem; /* 13 */
  --fs-overline:    0.75rem;   /* 12 */

  /* Line heights */
  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* Letter-spacing — Century Gothic benefits from positive tracking on caps */
  --ls-display:   -0.01em;
  --ls-heading:   -0.005em;
  --ls-body:       0;
  --ls-overline:   0.16em;   /* very open, like the "FINANCING" wordmark */
  --ls-wordmark:   0.22em;

  /* ================================================================
     SPACING, RADII, SHADOWS, MOTION
     ================================================================ */

  /* Spacing — 4px base */
  --space-0:  0;
  --space-1:  0.25rem;    /* 4 */
  --space-2:  0.5rem;     /* 8 */
  --space-3:  0.75rem;    /* 12 */
  --space-4:  1rem;       /* 16 */
  --space-5:  1.5rem;     /* 24 */
  --space-6:  2rem;       /* 32 */
  --space-7:  2.5rem;     /* 40 */
  --space-8:  3rem;       /* 48 */
  --space-9:  4rem;       /* 64 */
  --space-10: 5rem;       /* 80 */
  --space-11: 6rem;       /* 96 */
  --space-12: 8rem;       /* 128 */

  /* Radii — soft, generous; the website uses rounded cards + pill buttons */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* Shadows — light, diffused; never harsh */
  --shadow-xs: 0 1px 2px rgba(34, 49, 64, 0.06);
  --shadow-sm: 0 2px 6px rgba(34, 49, 64, 0.08);
  --shadow-md: 0 8px 24px rgba(34, 49, 64, 0.10);
  --shadow-lg: 0 16px 40px rgba(34, 49, 64, 0.14);
  --shadow-xl: 0 24px 60px rgba(34, 49, 64, 0.18);
  --shadow-focus: 0 0 0 4px rgba(26, 156, 61, 0.28);

  /* Motion */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;

  /* Container widths */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
}

/* =============================================================
   BASE / SEMANTIC TYPOGRAPHY
   Apply via utility classes or element resets.
   ============================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

/* Display — marketing hero scale */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-md);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

/* Body */
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.t-caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-3); }

/* Overline / eyebrow — echoes the "FINANCING" spacing on the logo */
.t-overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Wordmark-style — extreme tracking, used sparingly for section dividers */
.t-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Links */
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-link-hover); }

/* Color utilities */
.c-fg-1 { color: var(--fg-1); }
.c-fg-2 { color: var(--fg-2); }
.c-fg-3 { color: var(--fg-3); }
.c-brand { color: var(--fg-brand); }
.c-navy  { color: var(--bhz-navy-700); }
.bg-brand       { background: var(--surface-brand); color: var(--fg-on-brand); }
.bg-brand-soft  { background: var(--surface-brand-soft); }
.bg-navy        { background: var(--bhz-navy-700); color: var(--fg-on-inverse); }
.bg-navy-soft   { background: var(--surface-navy-soft); }
.bg-sunken      { background: var(--surface-sunken); }