/* ============================================================
   colors_and_type.css — base styles + fonts.
   ============================================================ */

@import url("./tokens.css");

/* ---------- Self-hosted Webfonts ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-700.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — all Space Grotesk */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
  max-width: var(--max-prose);
  text-wrap: pretty;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--max-prose);
  text-wrap: pretty;
  hyphens: auto;
}

small, .small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-muted);
}

.caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }

@media (max-width: 640px) {
  :root {
    --fs-display: 3.25rem;
    --fs-h1:      2.25rem;
    --fs-h2:      1.625rem;
    --fs-lead:    1.125rem;
  }
}

.rule { border: 0; border-top: var(--border-hairline); margin: var(--space-7) 0; }
.rule--strong { border-top: var(--border-rule); }