/* CYGMA typography — Roboto Flex (variable) does ALL the talking;
   Venture13 (pixel face) decorates and labels.

   Three Roboto Flex voices from the brandbook "Key fonts styles":
   1. EXTENDED  — width 145, weight 900–1000, optical ~50, line-height 85–100%.
      Headings & subheadings, sentence case, ≤30 chars/line.
   2. CONDENSED — width 25, weight 700–1000, line-height 85–95%, ALL CAPS ONLY.
      Card headings, hero statements, repeated equal headings.
   3. BODY      — width 100, weight 500 (Medium). Paragraphs, labels, captions.

   Venture13: all caps, single line only. Either very small (functional: dates,
   numbers, links, tags, nav) or large accent word in a cyan capsule — never
   middle ground. */

:root {
  --font-body: "Roboto Flex", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-pixel: "Venture13", "Roboto Flex", monospace;

  /* Voice presets (use with font-family: var(--font-body)) */
  --vox-extended: "wdth" 145, "opsz" 50; /* @kind font */
  --vox-condensed: "wdth" 25, "opsz" 50; /* @kind font */
  --vox-body: "wdth" 100; /* @kind font */

  --weight-display: 1000;  /* ExtraBlack — big extended headings */
  --weight-black: 900;     /* Black — mid headings */
  --weight-condensed: 700; /* Condensed caps minimum */
  --weight-body: 500;      /* Medium — default body */

  /* Scale (desktop) */
  --text-display: 124px;   /* hero/banner statements, lh 0.85 */
  --text-h1: 66px;         /* lh 0.85–0.9 */
  --text-h2: 46px;         /* extended section headings, lh 0.9 */
  --text-h3: 36px;         /* lh 0.95 */
  --text-h4: 22px;         /* "In More details" subheads, lh 0.95 */
  --text-lead: 26px;       /* hero paragraph, lh 1.1 */
  --text-body: 20px;       /* default paragraph, lh 1.2 */
  --text-body-sm: 16px;    /* secondary paragraph, lh 1.3 */
  --text-caption: 14px;    /* captions, lh 1.2 */
  --text-pixel-nav: 14px;  /* Venture13 nav, ls 0.09em */
  --text-pixel-tag: 13px;  /* Venture13 tags, ls 0.05em */

  --leading-tight: 0.85;
  --leading-heading: 0.95;
  --leading-body: 1.2;
  --leading-relaxed: 1.3;
}

/* Ready-made classes */
.type-extended {
  font-family: var(--font-body);
  font-variation-settings: var(--vox-extended);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.type-condensed {
  font-family: var(--font-body);
  font-variation-settings: var(--vox-condensed);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.type-body {
  font-family: var(--font-body);
  font-variation-settings: var(--vox-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

.type-pixel {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1;
}