/* ============================================================
   Tiiiime — Typography tokens
   ------------------------------------------------------------
   Tiiiime renders in San Francisco, the macOS system typeface:
   • SF Pro Text/Display for all UI text
   • SF Pro Rounded for timers, durations and big numbers
     (always with monospacedDigit so digits don't jitter)
   • SF Mono for code / identifiers

   San Francisco can't be redistributed, so the stacks lead with
   the system font (real SF on any Mac — the target platform) and
   fall back to a close Google Font for non-Apple viewers:
     SF Pro      → Albert Sans
     SF Pro Round→ Nunito
     SF Mono     → JetBrains Mono
   See fonts.css. Substitution is flagged in the readme.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Albert Sans", system-ui, sans-serif;
  /* Rounded — SF Pro Rounded. Timers, durations, headline stats. */
  --font-rounded: "SF Pro Rounded", -apple-system, "Nunito", system-ui, sans-serif;
  /* Monospace — SF Mono. Linear identifiers, code, CLI. */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---- Weights -------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Size scale (px) ------------------------------------ */
  /* Mirrors the literal sizes used across the app's SwiftUI views. */
  --text-10: 10px;   /* eyebrow / uppercase micro-label           */
  --text-11: 11px;   /* section header, keyboard hint, chip        */
  --text-12: 12px;   /* dense secondary text                       */
  --text-13: 13px;   /* popover row body — the workhorse size      */
  --text-14: 14px;   /* sidebar item, control label                */
  --text-16: 16px;   /* emphasis body                              */
  --text-17: 17px;   /* conversational / marketing body            */
  --text-18: 18px;   /* QuickStart search field                    */
  --text-22: 22px;   /* sub-headline                               */
  --text-28: 28px;   /* headline stat number                       */
  --text-40: 40px;   /* hero numeral                               */
  --text-64: 64px;   /* marquee timer                              */

  /* ---- Line heights --------------------------------------- */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.55;

  /* ---- Tracking ------------------------------------------- */
  --tracking-tight: -0.02em;   /* large rounded numerals          */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;     /* uppercase eyebrows (≈0.5px@10)   */
}

/* ============================================================
   Type helper classes — apply to elements directly.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-10);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--label-tertiary);
}

.t-section {
  font-family: var(--font-sans);
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--label-secondary);
}

.t-row {           /* popover / list row body */
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: var(--weight-regular);
  color: var(--label);
}

.t-sidebar {
  font-family: var(--font-sans);
  font-size: var(--text-14);
  font-weight: var(--weight-medium);
  color: var(--label);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-17);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--label);
}

/* Timer / duration — rounded, monospaced digits. The signature
   Tiiiime number treatment. */
.t-timer {
  font-family: var(--font-rounded);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--label);
}

.t-stat {
  font-family: var(--font-rounded);
  font-size: var(--text-28);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--label);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
  color: var(--label-secondary);
}