/* OKENTRA · Typography
 * Typeface: Manrope. Bold/SemiBold for titles, Regular/Medium for body.
 * Avoid Light in small text or commercial documents (brand rule). */
:root {
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

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

  /* Type scale (rem; 1rem = 16px) — display → caption */
  --fs-display: 4rem;     /* 64 */
  --fs-h1: 3rem;          /* 48 */
  --fs-h2: 2.25rem;       /* 36 */
  --fs-h3: 1.75rem;       /* 28 */
  --fs-h4: 1.375rem;      /* 22 */
  --fs-h5: 1.125rem;      /* 18 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.75rem;  /* 12 */
  --fs-overline: 0.6875rem;/* 11 */

  /* Line heights */
  --lh-tight: 1.1; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind font */
  --ls-snug: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-overline: 0.12em; /* @kind font */
}

/* Optional ready-made text roles — apply as classes if helpful.
   Components reference the tokens above directly. */
.ok-display { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--text-strong); }
.ok-h1 { font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); color: var(--text-strong); }
.ok-h2 { font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug); color: var(--text-strong); }
.ok-h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug); color: var(--text-strong); }
.ok-h4 { font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug);
  color: var(--text-strong); }
.ok-body { font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-relaxed);
  color: var(--text-body); }
.ok-body-sm { font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-normal);
  color: var(--text-body); }
.ok-overline { font-weight: var(--fw-bold); font-size: var(--fs-overline); line-height: 1;
  letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-accent); }