/* ==========================================================================
   OhSht — Typography tokens
   Headings: Nunito (rounded, heavy — matches the friendly bold UI type).
   Body:     Nunito Sans (clean humanist companion).
   NOTE: The wordmark logo is a custom rounded italic; it is NOT recreated
   in type — always use the logo PNG in assets/. Nunito is a Google Fonts
   substitute for the product UI font (see readme "Font substitution").
   ========================================================================== */

:root {
  /* Families */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 600;  /* @kind other */
  --fw-bold: 700;    /* @kind other */
  --fw-extra: 800;   /* @kind other */
  --fw-black: 900;   /* @kind other */

  /* Type scale (px) — dark UI reads best a touch larger */
  --fs-display: 56px;   /* landing hero */
  --fs-h1: 34px;        /* screen title ("Reviews", "Leave a Review") */
  --fs-h2: 26px;        /* place name */
  --fs-h3: 20px;        /* section heading in a card */
  --fs-lg: 18px;        /* prominent body */
  --fs-body: 16px;      /* default body */
  --fs-sm: 14px;        /* secondary / meta */
  --fs-xs: 12px;        /* labels, chips */
  --fs-eyebrow: 12px;   /* uppercase section labels */

  /* Line heights */
  --lh-tight: 1.08;     /* @kind other */
  --lh-heading: 1.18;   /* @kind other */
  --lh-body: 1.55;      /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em;  /* big display type @kind other */
  --ls-normal: 0;       /* @kind other */
  --ls-eyebrow: 0.14em; /* UPPERCASE SECTION LABELS @kind other */
}

/* Reusable type roles ------------------------------------------------------ */
.ohsht-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.ohsht-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}
.ohsht-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}
.ohsht-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}
.ohsht-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.ohsht-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}