/*
 * Festarikartan design-tokenit. Ainoa paikka, jossa värit, fontit, mitat ja liike määritellään.
 * Graafinen ohje: docs/graafinen-ohje (npm run dev → /ohje). Sähköpostien arvot: src/design/tokens.ts
 * (testi pitää ne samoina).
 */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-italic.woff2") format("woff2-variations");
}

:root {
  /* ---------- Värit: perusväripaletti ---------- */
  --color-yo: #1b1446;          /* Yö: valoisa kesäyö. Teksti, yläpalkki, tummat pinnat */
  --color-kokko: #ff5a36;       /* Kokko: juhannuskokko. Pääkorostus, CTA-pinnat, kartan merkit */
  --color-aurinko: #ffc23d;     /* Keskiyön aurinko: nostot, voitot, fokus */
  --color-jarvi: #2e6fe0;       /* Järvi: linkit tummalla, oma sijainti, info */
  --color-kanerva: #e2559a;     /* Kanerva: juhlava lisäväri, kuvitus ja somepohjat */
  --color-niitty: #1e9e6a;      /* Niitty: käynnissä nyt, onnistuminen */
  --color-hiekka: #fff6e8;      /* Hiekka: sivun tausta */
  --color-paperi: #ffffff;      /* Paperi: kortit ja lomakkeet */

  /* ---------- Värit: tekstikäyttöön tummennetut sävyt (AA ≥ 4,5:1 vaalealla) ---------- */
  --color-kokko-tumma: #c2381a;
  --color-jarvi-tumma: #1d56b8;
  --color-niitty-tumma: #11744c;
  --color-teksti-2: #4a4568;
  --color-vaimea: #6e6886;

  /* ---------- Värit: vaaleat sävypinnat ---------- */
  --color-kokko-vaalea: #ffe6dd;
  --color-aurinko-vaalea: #fff1cc;
  --color-jarvi-vaalea: #e3edff;
  --color-kanerva-vaalea: #fde4f0;
  --color-niitty-vaalea: #dff5ea;
  --color-sumu: #efeaf8;        /* neutraali vaalea liila: tagit, seurantapalkit */
  --color-viiva: #ebe1cf;       /* lämmin reunaviiva hiekalla */
  --color-virhe: #b42318;
  --color-virhe-vaalea: #fff0ee;

  /* ---------- Semanttiset roolit (käytä näitä komponenteissa) ---------- */
  --bg: var(--color-hiekka);
  --surface: var(--color-paperi);
  --ink: var(--color-yo);
  --ink-2: var(--color-teksti-2);
  --muted: var(--color-vaimea);
  --line: var(--color-viiva);
  --accent: var(--color-kokko);
  --accent-ink: var(--color-kokko-tumma);
  --link: var(--color-kokko-tumma);
  --sun: var(--color-aurinko);
  --now: var(--color-niitty);
  --focus: var(--color-aurinko);

  /* ---------- Typografia ---------- */
  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Skaala: 1,25 (major third), otsikot joustavat näytön mukaan */
  --text-xs: 0.75rem;      /* 12 px: tarrat, yläotsikot */
  --text-sm: 0.875rem;     /* 14 px: metatiedot */
  --text-md: 1rem;         /* 16 px: leipäteksti */
  --text-lg: 1.125rem;     /* 18 px: ingressi */
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* 20–24: H3 */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);       /* 24–32: H2 */
  --text-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);      /* 32–52: H1 */
  --text-4xl: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);    /* 40–76: näyttöotsikko */

  --display-wdth: 88%;     /* Bricolagen leveys otsikoissa: tiivis mutta luettava */

  /* ---------- Mitat ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Varjot: pehmeä nosto + "julistevarjo" (tasainen siirtymä ilman sumennusta) */
  --shadow-soft: 0 1px 2px rgb(27 20 70 / 6%), 0 8px 24px rgb(27 20 70 / 8%);
  --shadow-lift: 0 2px 4px rgb(27 20 70 / 8%), 0 16px 40px rgb(27 20 70 / 14%);
  --shadow-poster: 4px 4px 0 var(--color-yo);
  --shadow-poster-sun: 4px 4px 0 var(--color-aurinko);

  /* ---------- Liike ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --panel-w: 400px;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}