/* ============================================================
   Centrica · Typography tokens
   UI/body  → Geist        (shadcn New York)
   Mono     → Geist Mono
   Brand    → "British Gas" (substituted with Hanken Grotesk)
   ============================================================ */

:root {
  /* ---- Font families ---- */
  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-brand: "Hanken Grotesk", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-alt:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Weights ---- */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ---- Type scale (size / line-height) ---- */
  --text-xs:   0.75rem;   --leading-xs:   1rem;      /* 12 / 16 */
  --text-sm:   0.875rem;  --leading-sm:   1.25rem;   /* 14 / 20 */
  --text-base: 1rem;      --leading-base: 1.5rem;    /* 16 / 24 */
  --text-lg:   1.125rem;  --leading-lg:   1.75rem;   /* 18 / 28 */
  --text-xl:   1.25rem;   --leading-xl:   1.75rem;   /* 20 / 28 */
  --text-2xl:  1.5rem;    --leading-2xl:  2rem;      /* 24 / 32 */
  --text-3xl:  1.875rem;  --leading-3xl:  2.25rem;   /* 30 / 36 */
  --text-4xl:  2.25rem;   --leading-4xl:  2.5rem;    /* 36 / 40 */
  --text-5xl:  3rem;      --leading-5xl:  1;         /* 48 / 1  */
  --text-6xl:  3.75rem;   --leading-6xl:  1;         /* 60 / 1  */

  /* ---- Tracking ---- */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
}

/* ============================================================
   Prose / rich-text styles (shadcn "Typography" page)
   Apply via .ctype-* or scope under .prose.
   ============================================================ */
.ctype-h1 {
  font-family: var(--font-sans); font-weight: var(--font-weight-bold);
  font-size: var(--text-5xl); line-height: 1; letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}
.ctype-h2 {
  font-family: var(--font-sans); font-weight: var(--font-weight-semibold);
  font-size: var(--text-3xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}
.ctype-h3 {
  font-family: var(--font-sans); font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl); line-height: var(--leading-2xl); letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}
.ctype-h4 {
  font-family: var(--font-sans); font-weight: var(--font-weight-semibold);
  font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}
.ctype-p {
  font-family: var(--font-sans); font-weight: var(--font-weight-normal);
  font-size: var(--text-base); line-height: var(--leading-base); color: var(--foreground);
}
.ctype-lead {
  font-family: var(--font-sans); font-weight: var(--font-weight-normal);
  font-size: var(--text-xl); line-height: var(--leading-xl); color: var(--muted-foreground);
}
.ctype-large { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--foreground); }
.ctype-small { font-family: var(--font-sans); font-weight: var(--font-weight-medium); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--foreground); }
.ctype-muted { font-family: var(--font-sans); font-weight: var(--font-weight-normal); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.ctype-blockquote {
  font-family: var(--font-sans); font-style: italic; font-size: var(--text-base);
  line-height: var(--leading-base); color: var(--foreground);
  border-left: 2px solid var(--border); padding-left: 1.5rem;
}
.ctype-code {
  font-family: var(--font-mono); font-weight: var(--font-weight-semibold); font-size: var(--text-sm);
  background: var(--muted); color: var(--foreground);
  padding: 0.125rem 0.375rem; border-radius: var(--radius-sm);
}

/* Brand display — for marketing headlines & hero moments only */
.ctype-display {
  font-family: var(--font-brand); font-weight: var(--font-weight-bold);
  font-size: var(--text-6xl); line-height: 1.02; letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}