/* Uuden ilmeen design-tokenit. Ainoa paikka, jossa on raakoja väri- ja kirjasinkokoarvoja:
   lohkojen ja komponenttien CSS käyttää vain näitä muuttujia (portti: tools/lint-tokens.mjs).
   Värit ovat OKLCH-muodossa; sävyt johdetaan pohjaväreistä, joten brändivärin muutos
   päivittää myös hover-, reunus- ja läpinäkyvyyssävyt. */
:root{
  /* Pohjavärit (Pen-malli) */
  --mt-navy:oklch(24.9% .084 263.5);
  --mt-coral:oklch(63.8% .18 27.3);
  --mt-ink:oklch(18.7% .011 268.1);
  --mt-white:oklch(100% 0 0);
  --mt-mist:oklch(96.4% .003 264.5);
  --mt-blush:oklch(97.9% .009 17.3);

  /* Johdetut: koralli tekstinä ja painikkeissa (kontrasti valkoiseen vähintään 4,5:1) ja sen hover */
  --mt-coral-strong:oklch(from var(--mt-coral) calc(l - .068) calc(c - .009) h);
  /* Koralli pienenä tekstinä tummansinisellä: hieman vaaleampi, jotta kontrasti on vähintään 4,5:1 */
  --mt-coral-on-navy:oklch(from var(--mt-coral) calc(l + .05) c h);
  --mt-coral-deep:oklch(from var(--mt-coral) calc(l - .109) calc(c - .032) h);
  /* Johdetut: harmaat navyn sävykulmasta */
  --mt-text:oklch(from var(--mt-navy) 37.5% .027 h);
  --mt-muted:oklch(from var(--mt-navy) 50.2% .02 h);
  --mt-field:oklch(from var(--mt-navy) 84.8% .013 h);
  --mt-line:oklch(from var(--mt-navy) 89.4% .009 h);
  /* Johdetut: teksti ja viivat tummalla pohjalla */
  --mt-on-navy-soft:color-mix(in oklch,var(--mt-white) 85%,transparent);
  --mt-on-navy-muted:color-mix(in oklch,var(--mt-white) 72%,transparent);
  --mt-on-navy-border:color-mix(in oklch,var(--mt-white) 50%,transparent);
  --mt-on-navy-line:color-mix(in oklch,var(--mt-white) 13%,transparent);
  --mt-navy-0:color-mix(in oklch,var(--mt-navy) 0%,transparent);
  --mt-shadow:0 1.25rem 3rem color-mix(in oklch,var(--mt-navy) 18%,transparent);
  /* Tila: saatavuus ja onnistuminen (Pen #2E9E5B), varoitus */
  --mt-success:oklch(62% .15 152);
  --mt-warning:oklch(72% .15 70);
  /* Tila: virhe */
  --mt-danger:oklch(50.1% .178 28.7);
  --mt-danger-on-navy:oklch(91.6% .043 23.3);
  --mt-danger-line-on-navy:oklch(83.9% .089 25.1);

  /* Typografia */
  --mt-font-display:"termina","Avenir Next",Avenir,Futura,Arial,sans-serif;
  --mt-font-body:"Ubuntu",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  /* Fluidi kirjasinasteikko: skaalautuu 390 → 1440 px ilman breakpointeja */
  --mt-fs-2xs:.625rem;
  --mt-fs-xs:.6875rem;
  --mt-fs-sm:.8125rem;
  --mt-fs-md:.875rem;
  --mt-fs-base:clamp(.90625rem,.875rem + .15vw,.96875rem);
  --mt-fs-lg:1rem;
  --mt-fs-xl:clamp(1rem,.975rem + .2vw,1.0625rem);
  --mt-fs-h4:clamp(1.125rem,1.08rem + .25vw,1.25rem);
  --mt-fs-h3:clamp(1.25rem,1.2rem + .3vw,1.375rem);
  --mt-fs-h2:clamp(1.5rem,1.4rem + .45vw,1.75rem);
  --mt-fs-h2-lg:clamp(1.5rem,1.36rem + .6vw,1.875rem);
  --mt-fs-h1:clamp(2rem,1.72rem + 1.15vw,2.75rem);
  /* Koonti- ja etusivun herojen otsikot (Pen 52 ja 60 px) */
  --mt-fs-display:clamp(2rem,1.54rem + 1.9vw,3.25rem);
  --mt-fs-display-xl:clamp(2.25rem,1.7rem + 2.3vw,3.75rem);
  --mt-tracking-caps:.075rem;

  /* Fluidit välit */
  --mt-space-2xs:.375rem;
  --mt-space-xs:.625rem;
  --mt-space-sm:1rem;
  --mt-space-md:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --mt-space-lg:clamp(1.5rem,1.3rem + .9vw,2rem);
  --mt-space-xl:clamp(2rem,1.45rem + 2.3vw,3.5rem);
  --mt-space-section-sm:clamp(2rem,1.8rem + .9vw,2.5rem);
  --mt-space-section:clamp(3rem,2.4rem + 2.6vw,4.5rem);
  --mt-space-section-lg:clamp(3rem,2.25rem + 3.1vw,5rem);
  --mt-pad:clamp(1.25rem,-.33rem + 6.48vw,5.5rem);
  --mt-max:79rem;

  /* Muoto ja liike */
  --mt-radius:.5rem;
  --mt-radius-sm:.375rem;
  --mt-radius-pill:999rem;
  --mt-transition:200ms ease;

  /* Liike (ehdotelma 6.10.2026): yksi käyrä, neljä kestoa. Vähennetty liike nollaa kestot (motion.css). */
  --mt-ease-out:cubic-bezier(.2,.7,.2,1);
  --mt-ease-in-out:cubic-bezier(.6,0,.2,1);
  --mt-dur-1:140ms;
  --mt-dur-2:240ms;
  --mt-dur-3:520ms;
  --mt-dur-4:1400ms;
  --mt-rise:.75rem;
  --mt-stagger:70ms;
}