/* ============================================
   INTER TYPOGRAPHY SYSTEM
   Max content width: 756px
   Scale: Custom step scale
   Base: 16px
   ============================================ */

/* --- Base reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Root tokens --- */
:root {
  /* Font family */
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:  'Satoshi', system-ui, -apple-system, sans-serif;

  /* Scale (010 = smallest, 160 = largest) */
  --text-010:  0.5rem;     /*  8px — micro labels */
  --text-020:  0.625rem;   /* 10px — tiny UI text */
  --text-030:  0.75rem;    /* 12px — labels, captions, eyebrows */
  --text-040:  0.875rem;   /* 14px — small UI text */
  --text-050:  1rem;       /* 16px — body */
  --text-055:  1.125rem;   /* 18px — body large */
  --text-060:  1.25rem;    /* 20px — large UI */
  --text-070:  1.375rem;   /* 22px — lead paragraph */
  --text-080:  1.5rem;     /* 24px — H4 */
  --text-090:  1.75rem;    /* 28px — H3 */
  --text-100:  2rem;       /* 32px */
  --text-110:  2.25rem;    /* 36px */
  --text-120:  2.5rem;     /* 40px — H2 */
  --text-130:  3rem;       /* 48px — H1 */
  --text-140:  3.5rem;     /* 56px */
  --text-150:  4rem;       /* 64px */
  --text-160:  4.5rem;     /* 72px — hero display */

  /* Line heights — golden ratio scale (φ = 1.618, step = φ^¼ ≈ 1.128) */
  --leading-tight:   1.05;   /* display headings       */
  --leading-snug:    1.13;   /* φ^(1/4) — h2/h3        */
  --leading-normal:  1.27;   /* φ^(2/4) = √φ           */
  --leading-relaxed: 1.44;   /* φ^(3/4)                */
  --leading-body:    1.62;   /* φ^1 ≈ φ — body text    */
  --leading-caption: 1.50;   /* captions / eyebrows    */

  /* Letter spacing */
  --tracking-hero: -0.04em;
  --tracking-h1:   -0.03em;
  --tracking-h2:   -0.02em;
  --tracking-h3:   -0.01em;
  --tracking-body:  0em;
  --tracking-label: 0.01em;

  /* Font weights */
  --weight-thin:       300;
  --weight-extralight: 300;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   700;
  --weight-bold:       700;
  --weight-extrabold:  900;
  --weight-black:      900;

  /* Content width */
  --content-width: 756px;
}

/* --- Base styles --- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--text-050);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: 400;
}

/* --- Content container --- */
.content {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* --- Headings --- */
h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-130);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h1);
  font-weight: 700;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-120);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--weight-semibold);
  color: var(--semantic-color-text-primary);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-090);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-h3);
  font-weight: 600;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-080);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  font-weight: 600;
}

h5, h6, .h5, .h6 {
  font-family: var(--font-sans);
  font-size: var(--text-060);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: 600;
}

/* --- Utility classes --- */

/* Hero display — use for single large statement */
.text-hero {
  font-family: var(--font-heading);
  font-size: var(--text-160);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 900;
}

/* Lead paragraph */
.text-lead {
  font-size: var(--text-070);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  font-weight: 400;
}

/* Body — same as default, explicit class for overrides */
.text-body {
  font-size: var(--text-050);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

/* Caption / footnote */
.text-caption {
  font-size: var(--text-030);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-label);
}

/* Eyebrow label — small caps style */
.text-eyebrow {
  font-size: var(--text-030);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

/* --- Fluid hero for responsive scaling --- */
.text-hero-fluid {
  /* Discrete per-breakpoint sizing comes from --text-* tokens. */
  font-size: var(--text-160);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 900;
}

.h1-fluid {
  font-size: var(--text-130);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h1);
  font-weight: 700;
}

.h2-fluid {
  font-size: var(--text-120);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   Responsive scale — tablet (761px–1024px)
   Keep it discrete: editing tablet tokens won't affect desktop.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 761px) {
  :root {
    --text-160: 4rem;      /* 64px (was 72px) */
    --text-150: 3.5rem;    /* 56px (was 64px) */
    --text-140: 3rem;      /* 48px (was 56px) */
    --text-130: 2.75rem;   /* 44px (was 48px) */
    --text-120: 2.25rem;   /* 36px (was 40px) */
    --text-110: 2rem;      /* 32px (was 36px) */
  }
}

/* ─────────────────────────────────────────────────────────────
   Responsive scale — tablet ≤760px
   Only display/heading tokens scale; body (050 and below) stays at 16px.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root {
    --text-160: 3.5rem;    /* 56px  (was 72px)  */
    --text-150: 3rem;      /* 48px  (was 64px)  */
    --text-140: 2.5rem;    /* 40px  (was 56px)  */
    --text-130: 2.25rem;   /* 36px  (was 48px)  */
    --text-120: 1.875rem;  /* 30px  (was 40px)  */
    --text-110: 1.625rem;  /* 26px  (was 36px)  */
  }
}

/* ─────────────────────────────────────────────────────────────
   Responsive scale — mobile ≤480px
   Heading tokens scale further; body unchanged.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-160: 2.75rem;   /* 44px  (was 72px)  */
    --text-150: 2.5rem;    /* 40px  (was 64px)  */
    --text-140: 2.25rem;   /* 36px  (was 56px)  */
    --text-130: 2rem;      /* 32px  (was 48px)  */
    --text-120: 1.75rem;   /* 28px  (was 40px)  */
    --text-110: 1.5rem;    /* 24px  (was 36px)  */
    --text-090: 1.25rem;   /* 20px  (was 28px)  */
    --text-080: 1.125rem;  /* 18px  (was 24px)  */
    --text-070: 1rem;      /* 16px  (was 22px)  */
  }
}

/* --- Font size utilities --- */
.text-160 { font-size: var(--text-160); }
.text-150 { font-size: var(--text-150); }
.text-140 { font-size: var(--text-140); }
.text-130 { font-size: var(--text-130); }
.text-120 { font-size: var(--text-120); }
.text-110 { font-size: var(--text-110); }
.text-100 { font-size: var(--text-100); }
.text-090 { font-size: var(--text-090); }
.text-080 { font-size: var(--text-080); }
.text-070 { font-size: var(--text-070); }
.text-060 { font-size: var(--text-060); }
.text-055 { font-size: var(--text-055); }
.text-050 { font-size: var(--text-050); }
.text-040 { font-size: var(--text-040); }
.text-030 { font-size: var(--text-030); }
.text-020 { font-size: var(--text-020); }
.text-010 { font-size: var(--text-010); }

/* --- Font weight utilities --- */
.font-thin       { font-weight: var(--weight-thin); }
.font-extralight { font-weight: var(--weight-extralight); }
.font-light      { font-weight: var(--weight-light); }
.font-regular    { font-weight: var(--weight-regular); }
.font-medium     { font-weight: var(--weight-medium); }
.font-semibold   { font-weight: var(--weight-semibold); }
.font-bold       { font-weight: var(--weight-bold); }
.font-extrabold  { font-weight: var(--weight-extrabold); }
.font-black      { font-weight: var(--weight-black); }