/* Design tokens. Every colour, spacing step and type size lives here. */

/* Manrope, self-hosted. No Google Fonts embed: that would break the offline
   requirement and add an external request on every cold start.
   Variable weight 200-800, subset to Latin — see assets/fonts/NOTICE.md. */
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans:
    "Manrope",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Both are set per pack at runtime from Pack.background and Pack.accent.
     The values here are only what shows before the pack has loaded, so they
     are kept neutral rather than tied to any one pack. */
  --color-bg: #0f1320;
  --color-accent: #f2806f;

  /* Text is set per pack too, as an "r, g, b" triplet so the dimmed and hairline
     variants can be derived from it. A pack on a light background needs dark
     text, and everything built on the text colour has to follow it. */
  --color-text-rgb: 242, 237, 228;
  --color-text: rgb(var(--color-text-rgb));

  /* Opacities are set by the weakest pairing, then measured — values that
     looked right on paper failed when checked. */
  --color-text-dim: rgba(var(--color-text-rgb), 0.88);
  --color-line: rgba(var(--color-text-rgb), 0.4);

  /* Agent Zero brand colours, dark enough to carry light text.
     The brand base tones (green #2E9E6B, coral #F2806F) sit at 2.9:1 or worse
     against the off-white and cannot be used as backgrounds — they appear as
     accents instead. Measured contrast against --color-text:
       familj   #124A30  8.9:1
       kompis   #1E3A8A  8.9:1
       relation #843023  7.4:1 */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --text-meta: 1.0625rem;
  --text-body: 1.1875rem;
  --text-question: clamp(2.375rem, 8.5vw, 3.5rem);

  --measure-question: 20em;

  --transition-card: 260ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-card: 1ms linear;
  }
}