/* GoldCare — Typography tokens.
 *
 * One workhorse family (Inter) for everything; Fraunces italic reserved for
 * 1–2 emphasized headline words with the gold text-clip. Signature move:
 * headlines are weight 500 (medium), NOT bold — quiet confidence. Weight 700
 * appears in ONE place only: headlines inside dark sections.
 */

:root {
  /* Families */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* everything */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;  /* accent words only */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Legacy aliases (production names) */
  --font-body:    var(--font-sans);
  --font-heading: var(--font-sans);

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Fluid role sizes (marketing scale — all clamp()) */
  --fs-eyebrow:     12px; /* @kind font */
  --fs-hero:        clamp(36px, 4.6vw, 56px);   /* @kind font */
  --fs-h2:          clamp(28px, 3.4vw, 42px);   /* @kind font */
  --fs-h2-dark:     clamp(30px, 4vw, 48px);     /* @kind font */
  --fs-h3:          19px;                        /* @kind font */
  --fs-body-lg:     clamp(15px, 1.3vw, 17px);   /* @kind font */
  --fs-body:        14px;                        /* @kind font */
  --fs-small:       13px;                        /* @kind font */
  --fs-price:       clamp(48px, 7vw, 58px);     /* @kind font */

  /* Static size scale (portal / component UI, base 16px) */
  --fs-2xs: 0.625rem;   /* @kind font */
  --fs-xs:  0.75rem;    /* @kind font */
  --fs-sm:  0.875rem;   /* @kind font */
  --fs-md:  1rem;       /* @kind font */
  --fs-lg:  1.25rem;    /* @kind font */
  --fs-xl:  1.5rem;     /* @kind font */
  --fs-2xl: 1.875rem;   /* @kind font */
  --fs-3xl: 2rem;       /* @kind font */
  --fs-4xl: 2.25rem;    /* @kind font */

  /* Line heights */
  --lh-hero:    1.03;  /* @kind other */
  --lh-heading: 1.08;  /* @kind other */
  --lh-shorter: 1.25;  /* @kind other */
  --lh-short:   1.375; /* @kind other */
  --lh-base:    1.5;   /* @kind other */
  --lh-body:    1.6;   /* @kind other */
  --lh-tall:    1.625; /* @kind other */

  /* Letter spacing — headings only ever go tighter, never positive */
  --ls-hero:     -0.028em;  /* @kind other */
  --ls-heading:  -0.02em;   /* @kind other */
  --ls-dark:     -0.025em;  /* @kind other */
  --ls-tight:    -0.01em;   /* @kind other */
  --ls-price:    -0.03em;   /* @kind other */
  --ls-normal:   0;         /* @kind other */
  --ls-overline: 0.18px;    /* @kind other */
}

/* ================================================================
 * BASE ELEMENT STYLES
 * ================================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);   /* 500, not bold */
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--ls-normal);
}

/* Utility classes — mirror the role table in the handoff */

.gc-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.gc-eyebrow--gold { color: var(--text-gold); }

.gc-hero {
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--text-primary);
}

.gc-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
}

/* Dark-section H2 — the one place weight 700 is allowed */
.gc-h2-dark {
  font-size: var(--fs-h2-dark);
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: var(--ls-dark);
  color: var(--text-inverse);
}

.gc-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.gc-body-lg {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.gc-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

.gc-small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-tertiary);
}

/* The premium accent — Fraunces italic + gold gradient text-clip.
 * Use on 1–2 words INSIDE a headline. Scarcity is what makes it premium. */
.gc-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  background: var(--gold-gradient-btn);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

code, kbd, .gc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}