/*
 * Design-tokenit — janttila.fi, suunta A "Linjakartta"
 * Auktoritatiivinen lähde: docs/specs/ui-design.md (kohta 3)
 * Päätös: docs/decisions/ADR-003-ui-suunta.md
 * Sijainti repossa: apps/web/styles/tokens.css
 */

/* Webfontit (speksin kohta 3 ja budjetti 4.1): 2 woff2-tiedostoa,
 * latin-subset, font-display: swap. Generointi: scripts/fonts/. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700; /* variable-fontti, yksi tiedosto */
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Sivusto on aina tumma (ui-design.md 4.2): ilmoitus estää Androidin
     automaattista tummaa tilaa värittämästä sivua uudelleen ja
     teemoittaa lomakekontrollien natiiviosat */
  color-scheme: dark;

  /* Värit */
  --color-bg: #000000;
  --color-text: #F2F2ED;
  --color-text-strong: #FFFFFF;   /* vain otsikot — leipäteksti ei puhtaan valkoista (halaatio) */
  --color-text-muted: #8A8A8A;    /* 6,0:1 mustalla — WCAG AA ok */
  --color-accent: #FFB000;        /* signaaliamber */
  --color-alert: #FF5C5C;         /* huomioväri: mennyt vuoro (5,9:1 mustalla) */
  --color-hairline: #1E1E1E;

  /* Typografia */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(2rem, 1.2rem + 4vw, 3.25rem);  /* hero-otsikko, skaalautuu ilman media queryja */
  --leading-tight: 1.15;
  --leading-base: 1.55;

  /* Välit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Liike — vain transform ja opacity */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* Perussäännöt — ks. speksin kohdat 4.2 ja 4.3 */

html,
body {
  background-color: var(--color-bg); /* ei valkoista välähdystä Safarin overscrollissa */
  /* Android Chrome: estä vedä-päivittääksesi (pull-to-refresh) ja
     vieritysketjutus — sovelluksen pystyvieritys ei lataa sivua
     uudelleen (ui-design.md 4.7). Safarissa ei ole tätä elettä. */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
}

/* Lähtötaulun numerot: mono + tabulaariset numerot, jotta countdown ei hypi */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}