/* ============================================================
   Jakober Musi — Typography tokens
   --font-sans    : Archivo — modern editorial grotesque for UI, body,
                    and the recognizable uppercase headline (two registers:
                    loud Black for posters/hero, light + open-tracked for
                    elegant web section headings).
   --font-serif   : Cormorant Garamond — high-contrast italic serif for
                    refined accents & pull-quotes.
   --font-display : Cormorant Garamond used large & light — the edel
                    headline voice (e.g. the intro statement).
   ============================================================ */

:root {
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  /* Display serif — the elegant headline voice (same family, used large & light) */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ---- Type scale (modular, ~1.25) ---- */
  --text-2xs:  0.6875rem;  /* 11px — micro labels */
  --text-xs:   0.75rem;    /* 12px — captions, meta */
  --text-sm:   0.875rem;   /* 14px — secondary UI */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px — lead body */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */
  --text-5xl:  5.5rem;     /* 88px — poster display */
  --text-6xl:  7.5rem;     /* 120px — poster hero */

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* ---- Line heights ---- */
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:   -0.02em;
  --tracking-display: -0.01em;  /* elegant serif display */
  --tracking-normal:  0;
  --tracking-caps:    0.14em;   /* refined uppercase headline */
  --tracking-wide:    0.04em;
  --tracking-label:   0.2em;    /* eyebrows / overlines — couture all caps */
  --tracking-seal:    0.26em;   /* widest — used around the mark */
}

/* Global optical refinements for an elegant read */
:root {
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* ============================================================
   Type roles — apply as classes or copy the rules into components.
   ============================================================ */

/* Eyebrow / overline — refined small all-caps label voice */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand);
}

/* Elegant serif display — the edel headline voice (large, light, refined) */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2.75rem, 7vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  text-wrap: balance;
}
.t-display em, .t-display .accent {
  font-style: italic;
  color: var(--brand);
}

/* Refined uppercase headline — the recognizable voice, lightened for elegance */
.t-display-caps {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 6vw, var(--text-4xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-strong);
  text-wrap: balance;
}

/* Section heading — serif, refined */
.t-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  text-wrap: balance;
}

/* Elegant serif accent — quotes, refined subheads */
.t-serif {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--text-strong);
}

/* Lead paragraph */
.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* Body */
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  text-wrap: pretty;
}

/* Meta / caption */
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}