/* Hallmark · tokens · theme: custom (JIT-sininen) · paper-band: light · display-style: grotesk-sans · accent-hue: cool
 * vibe: "kaupan takahuoneen tarkkuus, mustasininen ja valkoinen"
 * paper oklch(98.6% 0.004 250) · accent oklch(50% 0.16 255) · Geist + Geist Mono
 */
:root {
  /* Väri — paperi ja muste */
  --color-paper:        oklch(98.6% 0.004 250);
  --color-paper-2:      oklch(96.2% 0.007 250);
  --color-paper-3:      oklch(93.4% 0.010 250);
  --color-rule:         oklch(88.5% 0.011 250);
  --color-rule-strong:  oklch(76% 0.014 252);
  --color-muted:        oklch(47% 0.022 256);
  --color-ink-2:        oklch(33% 0.030 257);
  --color-ink:          oklch(21% 0.036 258);
  --color-night:        oklch(18.5% 0.042 258);
  --color-night-2:      oklch(24% 0.046 257);

  /* Väri — JIT-sininen korostus (≤ 5 % näkymästä) */
  --color-accent:       oklch(50% 0.160 255);
  --color-accent-hover: oklch(44% 0.150 256);
  --color-accent-tint:  oklch(94.5% 0.026 250);
  --color-accent-soft:  oklch(84% 0.070 240);
  --color-on-dark:      oklch(98.6% 0.004 250);
  --color-on-dark-2:    oklch(82% 0.022 252);
  --color-focus:        oklch(56% 0.190 255);
  --color-error-ink:    oklch(50% 0.190 25);   /* lomakkeen virheviesti (lomakkeet ovat vaalealla pohjalla) */

  /* Päällysteet kuvien päällä (läpinäkyvyys on muunnin, ei väri) */
  --color-scrim:        oklch(17% 0.040 258 / 0.92);
  --color-scrim-0:      oklch(17% 0.040 258 / 0);
  --color-glass-panel:  oklch(19% 0.045 258 / 0.44);  /* hero-paneeli leveällä näytöllä, kevennetty */
  --color-glass-deep:   oklch(19% 0.045 258 / 0.72);  /* hero-paneeli, kun banneri rajautuu kirkkaaseen kohtaan */
  --color-glass-label:  oklch(98.6% 0.004 250 / 0.55);  /* huurrelasietiketti kuvan päällä: kuva näkyy läpi */
  --color-glass-label-hover: oklch(98.6% 0.004 250 / 0.78);
  --color-glass-ink:    oklch(21% 0.036 258 / 0.66);  /* tumma lasietiketti vaalean tuotekuvan päällä */
  --color-glass-ink-hover: oklch(21% 0.036 258 / 0.84);
  --color-photo-light:  oklch(90.81% 0.0081 253.9);  /* tuotekuvien vaalea vakiotausta #DDE1E6, luku 10 */
  --glass-edge:         inset 0 1px 0 oklch(100% 0 0 / 0.5);  /* lasin yläreunan heijastus, ei reunaviivaa */
  --color-glass-nav:    oklch(98.6% 0.004 250 / 0.88);  /* navigaatio heron jälkeen: ei samene tummien kuvien päällä */
  --color-glass-chip:   oklch(98.6% 0.004 250 / 0.16);
  --color-glass-line:   oklch(98.6% 0.004 250 / 0.16);
  --color-photo-bed:    oklch(30% 0.006 250);
  --shadow-float:       0 10px 30px oklch(21% 0.036 258 / 0.12);
  --shadow-panel:       0 30px 70px oklch(12% 0.04 258 / 0.30);

  /* Typografia */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; /* vain tuotedata */

  --text-2xs:     0.6875rem;                                   /* 11 px, vain laskurin numero */
  --text-xs:      0.8125rem;                                   /* 13 px, kuvakorttien mitat ja tunnisteet */
  --text-sm:      0.9375rem;                                   /* 15 px */
  --text-base:    1.0625rem;                                   /* 17 px */
  --text-md:      clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* ingressi */
  --text-lg:      clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);   /* korttiotsikot */
  --text-xl:      clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);     /* palveluiden nimet, puhelinnumero */
  --text-2xl:     clamp(2rem, 1.35rem + 2.2vw, 3rem);          /* osio-otsikot */
  --text-statement: clamp(2.125rem, 1.35rem + 2.8vw, 3.625rem); /* yksi lausuma per sivu */
  --text-display: clamp(2.375rem, 1.5rem + 3vw, 3.75rem);      /* hero */

  /* Tila — 4 pt asteikko */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Muodot */
  /* Terävät kulmat kaikkialla – asiakkaan linjaus 21.10.2026 */
  --radius-card:  0;
  --radius-input: 0;
  --radius-sheet: 0;
  --radius-panel: 0;
  --radius-pill:  0;
  --rule-hair:    1px;
  --grid-seam:    2px;    /* tuoteruudukon saumat */

  /* Kuvakaistat mobiilissa */
  --hero-photo-h:    380px;   /* bannerin korkeus mobiilissa */
  --hero-overlap:    14.5rem; /* paneelin yläreuna bannerin päällä */

  /* Liike */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* Kerrokset */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-skip:     300;

  /* Mittasuhteet */
  --page-max: 1240px;
  --gutter:   clamp(1rem, 4vw, 2.5rem);
  --nav-h:    64px;
}