/* ──────────────────────────────────────────────────────────
   Haul Design System — colors_and_type.css
   The warm-cream + saturated-orange + coffee-ink system.
   Load Inter from Google Fonts. Degular Display is proprietary;
   substitute with Inter weight 500 at hero scale (see README).
   ────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    /* ── Color · Brand ────────────────────────────────────── */
    --color-primary: #ff4f00; /* Haul orange — every CTA */
    --color-on-primary: #fffefb; /* Warm white on primary */
    /* ── Color · Surface ──────────────────────────────────── */
    --color-canvas: #fffefb; /* Warm off-white page bg */
    --color-canvas-soft: #f8f4f0; /* Cream-tinted soft surface */
    /* ── Color · Text ─────────────────────────────────────── */
    --color-ink: #201515; /* Deep coffee — primary text */
    --color-ink-soft: #2f2a26; /* Near-black, brown warmth */
    --color-ink-mid: #36342e; /* Mid-emphasis text */
    --color-body: #605d52; /* Default body */
    --color-body-mid: #939084; /* Secondary / meta */
    --color-mute: #c5c0b1; /* Hairlines, fine print */
    /* ── Color · Semantic aliases ─────────────────────────── */
    --fg-1: var(--color-ink);
    --fg-2: var(--color-ink-mid);
    --fg-3: var(--color-body);
    --fg-4: var(--color-body-mid);
    --fg-5: var(--color-mute);
    --bg-1: var(--color-canvas);
    --bg-2: var(--color-canvas-soft);
    --bg-inverse: var(--color-ink);
    --fg-inverse: var(--color-on-primary);
    --accent: var(--color-primary);
    --border: var(--color-ink);
    --hairline: var(--color-mute);
    /* ── Type · Families ──────────────────────────────────── */
    /* --font-display: "Degular Display", "Inter", system-ui, -apple-system, sans-serif;
   --font-body: "Inter", system-ui, -apple-system, sans-serif;*/
    --font-display: "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
    --font-body: "Montserrat ", system-ui, -apple-system, sans-serif;
    /* ── Type · Scale ─────────────────────────────────────── */
    --fs-display-xl: 56px;
    --lh-display-xl: 56px;
    --fw-display-xl: 500;
    --fs-display-lg: 48px;
    --lh-display-lg: 48px;
    --fw-display-lg: 500;
    --fs-display-md: 32px;
    --lh-display-md: 36px;
    --fw-display-md: 500;
    --ls-display-md: 1px;
    --fs-display-sub-lg: 48px;
    --lh-display-sub-lg: 49.92px;
    --fw-display-sub-lg: 500;
    --fs-display-sub-md: 32px;
    --lh-display-sub-md: 40px;
    --fw-display-sub-md: 400;
    --fs-display-sub-sm: 24px;
    --lh-display-sub-sm: 30px;
    --fw-display-sub-sm: 600;
    --ls-display-sub-sm: -0.6px;
    --fs-display-xs: 20px;
    --lh-display-xs: 25px;
    --fw-display-xs: 700;
    --ls-display-xs: -0.5px;
    --fs-body-lg: 20px;
    --lh-body-lg: 30px;
    --fw-body-lg: 400;
    --ls-body-lg: -0.2px;
    --fs-body-md: 18px;
    --lh-body-md: 27px;
    --fw-body-md: 400;
    --fs-body-md-strong: 18px;
    --lh-body-md-strong: 27px;
    --fw-body-md-strong: 600;
    --fs-body-sm: 16px;
    --lh-body-sm: 24px;
    --fw-body-sm: 400;
    --fs-body-sm-strong: 16px;
    --lh-body-sm-strong: 24px;
    --fw-body-sm-strong: 600;
    --fs-caption: 14px;
    --lh-caption: 21px;
    --fw-caption: 400;
    --fs-eyebrow: 14px;
    --lh-eyebrow: 14px;
    --fw-eyebrow: 500;
    --ls-eyebrow: 1px;
    --fs-button-md: 18px;
    --lh-button-md: 27px;
    --fw-button-md: 600;
    --fs-button-sm: 14.4px;
    --lh-button-sm: 14.4px;
    --fw-button-sm: 700;
    --ls-button-sm: 0.144px;
    /* ── Shape ────────────────────────────────────────────── */
    --radius-none: 0px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-pill: 9999px;
    --radius-full: 9999px;
    /* ── Spacing (base 4) ─────────────────────────────────── */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    /* ── Elevation (rare; mostly surface contrast carries) ── */
    --shadow-1: 0 1px 2px rgba(32, 21, 21, 0.04);
    --shadow-2: 0 8px 24px rgba(32, 21, 21, 0.08);
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* ── Semantic type classes ───────────────────────────────── */
.h1, h1, .display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  font-weight: var(--fw-display-xl);
  letter-spacing: 0;
  margin: 0;
}
.h2, h2, .display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: var(--fw-display-lg);
  margin: 0;
}
.h3, h3, .display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  font-weight: var(--fw-display-md);
  letter-spacing: var(--ls-display-md);
  margin: 0;
}
.display-sub-lg {
  font-family: var(--font-body);
  font-size: var(--fs-display-sub-lg);
  line-height: var(--lh-display-sub-lg);
  font-weight: var(--fw-display-sub-lg);
}
.display-sub-md {
  font-family: var(--font-body);
  font-size: var(--fs-display-sub-md);
  line-height: var(--lh-display-sub-md);
  font-weight: var(--fw-display-sub-md);
}
.h4, h4, .display-sub-sm {
  font-family: var(--font-body);
  font-size: var(--fs-display-sub-sm);
  line-height: var(--lh-display-sub-sm);
  font-weight: var(--fw-display-sub-sm);
  letter-spacing: var(--ls-display-sub-sm);
  margin: 0;
}
.h5, h5, .display-xs {
  font-family: var(--font-body);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
  font-weight: var(--fw-display-xs);
  letter-spacing: var(--ls-display-xs);
  margin: 0;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-body-lg);
  letter-spacing: var(--ls-body-lg);
}
.body-md, p {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-body-md);
}
.body-md-strong, strong {
  font-size: var(--fs-body-md-strong);
  line-height: var(--lh-body-md-strong);
  font-weight: var(--fw-body-md-strong);
}
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-body-sm);
}
.body-sm-strong {
  font-size: var(--fs-body-sm-strong);
  line-height: var(--lh-body-sm-strong);
  font-weight: var(--fw-body-sm-strong);
}
.caption, small {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-caption);
  color: var(--color-body);
}
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: var(--fw-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-button-md);
  line-height: var(--lh-button-md);
  font-weight: var(--fw-button-md);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, background-color 160ms ease, color 160ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary   { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover   { background: #e64700; }
.btn-secondary { background: var(--color-ink);     color: var(--color-on-primary); }
.btn-secondary:hover { background: #000; }
.btn-tertiary  { background: var(--color-canvas);  color: var(--color-ink); border-color: var(--color-ink); }
.btn-tertiary:hover  { background: var(--color-canvas-soft); }
.btn-text {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--fs-button-sm);
  line-height: var(--lh-button-sm);
  font-weight: var(--fw-button-sm);
  letter-spacing: var(--ls-button-sm);
  padding: var(--space-sm) var(--space-lg);
}

/* ── Inputs ──────────────────────────────────────────────── */
.input {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  width: 100%;
}
.input::placeholder { color: var(--color-body-mid); }
.input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}
.card-dark {
  background: var(--color-ink);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}
.card-outline {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

/* ── Pill / badge ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}