/* =========================
   Archborn Typography System
   Font: Inter
   Weights allowed: 400 / 600 / 700
   ========================= */

/* 1) Load Inter (preferred: self-host for consistency and performance)
   If you are NOT self-hosting yet, keep the Google Fonts import for now.
   Self-hosting notes below.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

:root {
  /* Font stacks */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Weights */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Sizes (desktop-first) */
  --text-body: 18px;
  --text-small: 16px;

  --h1: 56px;
  --h2: 36px;
  --h3: 24px;
  --h4: 18px; /* use sparingly - often same as body but semibold */

  /* Line heights */
  --lh-body: 1.65;
  --lh-tight: 1.1;
  --lh-heading: 1.15;

  /* Letter spacing */
  --ls-heading: -0.01em;
  --ls-tight: -0.02em;
  --ls-normal: 0;

  /* Paragraph measure */
  --measure: 68ch;
}

/* Responsive scale */
@media (max-width: 1024px) {
  :root {
    --text-body: 17px;
    --h1: 48px;
    --h2: 32px;
    --h3: 22px;
  }
}

@media (max-width: 640px) {
  :root {
    --text-body: 16px;
    --h1: 38px;
    --h2: 28px;
    --h3: 20px;
  }
}

/* Global base */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
}

/* Ensure ALL elements inherit the same font unless explicitly overridden */
* {
  font-family: inherit;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 0.6em 0;
}

h1 {
  font-size: var(--h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

h4 {
  font-size: var(--h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-normal);
}

/* Body copy */
p, li, dt, dd, blockquote {
  font-weight: var(--weight-regular);
}

/* Optional: keep paragraphs readable */
p {
  max-width: var(--measure);
}

/* Links should not introduce weight changes */
a {
  font-weight: inherit;
}

/* UI elements */
button, input, textarea, select {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
}

/* Utilities you can use in HTML */
.text-small { font-size: var(--text-small); }
.text-regular { font-weight: var(--weight-regular); }
.text-semibold { font-weight: var(--weight-semibold); }
.text-bold { font-weight: var(--weight-bold); }

.kicker {
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.outcome {
  font-weight: var(--weight-semibold);
}