/* SignVerse Design Tokens — sv-tokens.css
   Single source of truth for typography, spacing, and color tokens.
   Import FIRST in every page: <link rel="stylesheet" href="/static/sv-tokens.css">

   To change the app font globally, edit --sv-font-family below. */

:root {
  /* ── Font Family ── */
  --sv-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sv-font-display: 'Dancing Script', cursive, 'Segoe Script', 'Comic Sans MS', cursive;
  /* Monospace for hashes / code / token digests (the justified exception in
     CLAUDE.md), as a token so pages reference var(--sv-font-mono) instead of
     hardcoding the stack — lint-clean and switched centrally. */
  --sv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Font Size Scale ── */
  --sv-text-xs:  11px;
  --sv-text-sm:  12px;
  --sv-text-md:  13px;
  --sv-text-base: 14px;
  --sv-text-lg:  16px;
  --sv-text-xl:  18px;
  --sv-text-2xl: 22px;

  /* ── Font Weight ── */
  --sv-weight-normal:    400;
  --sv-weight-medium:    500;
  --sv-weight-semibold:  600;
  --sv-weight-bold:      700;
  --sv-weight-extrabold: 800;

  /* ── Line Height ── */
  --sv-leading-none:    1.1;   /* display numerals / tight stat figures */
  --sv-leading-tight:   1.3;
  --sv-leading-snug:    1.4;
  --sv-leading-normal:  1.5;
  --sv-leading-relaxed: 1.6;
}

/* ── Big-screen bump: nudge every text token up ~1 step when the viewport is wide.
   The platform runs at html { zoom: 0.75 } on desktop (sf-core.css), so on a 27"
   monitor the raw px values above render very small. These media queries scale the
   tokens themselves so every .sv-* class inherits the bump — no per-component edits.
   Chosen breakpoints match the presentation ranges most users report:
     1600-1919  → +1 step   (large laptops / 24-27" 1080p and 1440p)
     1920+      → +2 steps  (27" 4K, external presentations, TVs)                   */
@media (min-width: 1600px) {
  :root {
    --sv-text-xs:   12px;
    --sv-text-sm:   13px;
    --sv-text-md:   14px;
    --sv-text-base: 15px;
    --sv-text-lg:   17px;
    --sv-text-xl:   20px;
    --sv-text-2xl:  25px;
  }
}
@media (min-width: 1920px) {
  :root {
    --sv-text-xs:   13px;
    --sv-text-sm:   14px;
    --sv-text-md:   15px;
    --sv-text-base: 16px;
    --sv-text-lg:   18px;
    --sv-text-xl:   22px;
    --sv-text-2xl:  28px;
  }
}

/* ── Global font family reset ── */
html, body, button, input, textarea, select {
  font-family: var(--sv-font-family);
}