/* ════════════════════════════════════════
   TYPOGRAPHY — Fonts, sizes, spacing
   All type values live here. To restyle
   the whole app, only edit this file.
   ════════════════════════════════════════ */

/* ── Font families ── */
:root {
  --font-mono:    'Share Tech Mono', monospace;  /* body / UI */
  --font-display: 'VT323', monospace;            /* headings / pixel titles */
}

/* ── Type scale ── */
:root {
  --text-xxs:  11px;   /* badges, tiny labels          */
  --text-xs:   12px;   /* hour labels, secondary dim   */
  --text-sm:   13px;   /* captions, slot labels, dates */
  --text-base: 13.5px;   /* event chips, calendar text   */
  --text-md:   14px;   /* buttons, meta, week label    */
  --text-ui:   15px;   /* task rows, inputs            */
  --text-body: 17px;   /* base body size               */
  --text-cat:  16px;   /* category headers             */

  /* Display scale — always paired with --font-display */
  --text-d-sm:  20px;  /* project name in work log     */
  --text-d-md:  24px;  /* panel headers (.ph-title)    */
  --text-d-lg:  26px;  /* day number in calendar       */
  --text-d-xl:  36px;  /* DEVQUEST wordmark            */
  --text-d-xxl: 42px;  /* big % progress number        */
}

/* ── Letter spacing ── */
:root {
  --ls-tight:  1px;
  --ls-normal: 2px;
  --ls-wide:   4px;
}

/* ── Line heights ── */
:root {
  --lh-tight:  1;
  --lh-snug:   1.1;
  --lh-base:   1.2;
  --lh-normal: 1.3;
  --lh-loose:  1.8;
}

/* ════════════════════════════════════════
   FONT FAMILY HELPERS
   ════════════════════════════════════════ */

.font-mono    { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.vt           { font-family: var(--font-display); } /* shorthand alias */

/* ════════════════════════════════════════
   COLOUR HELPERS
   ════════════════════════════════════════ */

.teal   { color: var(--c1); }
.pink   { color: var(--c2); }
.yellow { color: var(--c3); }
.dim    { color: var(--dim); }

/* ════════════════════════════════════════
   SIZE UTILITIES
   Use these when no semantic role class fits.
   ════════════════════════════════════════ */

.text-xxs  { font-size: var(--text-xxs);  }
.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md);   }
.text-ui   { font-size: var(--text-ui);   }
.text-body { font-size: var(--text-body); }

/* Display sizes always apply the display font too */
.text-d-sm  { font-family: var(--font-display); font-size: var(--text-d-sm);  }
.text-d-md  { font-family: var(--font-display); font-size: var(--text-d-md);  }
.text-d-lg  { font-family: var(--font-display); font-size: var(--text-d-lg);  }
.text-d-xl  { font-family: var(--font-display); font-size: var(--text-d-xl);  }
.text-d-xxl { font-family: var(--font-display); font-size: var(--text-d-xxl); }

/* ════════════════════════════════════════
   LETTER SPACING UTILITIES
   ════════════════════════════════════════ */

.ls-tight  { letter-spacing: var(--ls-tight);  }
.ls-normal { letter-spacing: var(--ls-normal); }
.ls-wide   { letter-spacing: var(--ls-wide);   }

/* ════════════════════════════════════════
   SEMANTIC ROLE CLASSES
   Named after *what* they style, not
   *how big* they are. Prefer these over
   raw size utilities in HTML and templates.
   ════════════════════════════════════════ */

/* DEVQUEST_ header wordmark */
.type-wordmark {
  font-family:    var(--font-display);
  font-size:      var(--text-d-xl);
  letter-spacing: var(--ls-wide);
}

/* Panel titles — WEEKLY SCHEDULE, WORK LOG… */
.type-panel-title {
  font-family:    var(--font-display);
  font-size:      var(--text-d-md);
  letter-spacing: var(--ls-normal);
}

/* Big project completion % */
.type-big-pct {
  font-family: var(--font-display);
  font-size:   var(--text-d-xxl);
  line-height: var(--lh-tight);
}

/* Day number in calendar header */
.type-day-num {
  font-family: var(--font-display);
  font-size:   var(--text-d-lg);
  line-height: var(--lh-snug);
}

/* Small all-caps labels — ANYTIME, PROJECT COMPLETION… */
.type-section-label {
  font-size:      var(--text-sm);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color:          var(--dim);
}

/* Timed event block title — ellipsis overflow */
.type-ev-title {
  font-size:     var(--text-base);
  line-height:   var(--lh-normal);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Secondary meta text — task count, week label, project label */
.type-meta {
  font-size: var(--text-md);
}

/* Small captions — sprint notes, footer, modal detail text */
.type-caption {
  font-size: var(--text-sm);
}

/* Italic sprint note inside project body */
.type-sprint-note {
  font-size:  var(--text-sm);
  font-style: italic;
  color:      var(--dim);
}

/* Progress bar label */
.type-prog-label {
  font-size: var(--text-md);
  color:     var(--dim);
}