/* =====================================================================
   E-Toimisto «sävy»: koko sivu seuraa heron värisävyä.
   Body saa luokan tint-<sävy> (views/layout.js). Sävyn päävärit (--t, --t2, --tb)
   ovat lux.css:ssä; tässä jokaiselle sävylle oma vihreä-asteikko (--s-*), joka
   korvaa teema.css:n --g-*-asteikon sisällössä (main) ja yhteydenottokutsussa.
   Yläpalkki, alatunniste ja logo pysyvät ennallaan (ne ovat mainin ulkopuolella).

   Asteikko on laskettu niin, että jokaisen sävyn kirkkaus (ja siis kontrasti)
   vastaa nykyistä smaragdiasteikkoa: aksenttiteksti valkoisella ≥ 5,3:1,
   painikkeen valkoinen teksti ≥ 9:1, vaalea aksentti tummalla ≥ 6,9:1.
   Smaragdi = sivuston alkuperäiset arvot, joten etusivu näyttää samalta.
   Ladataan viimeisenä (views/layout.js).
   ===================================================================== */

/* ---------- Sävyjen asteikot ---------- */
.tint-emerald { --s-g-950: #072415; --s-g-900: #0f3d24; --s-g-850: #12462a; --s-g-800: #155231; --s-g-700: #1f6b2e; --s-g-600: #2e7a0d; --s-accent-strong: #245f0a; --s-g-500: #3fa516; --s-g-300: #8fd65c; --s-g-100: #e6f3dd; --s-g-50: #f1f7ee; --s-deep-1: #1d6a35; --s-deep-2: #165a2b; --s-deep-3: #124d25; --s-bg: #f7f9f6; --s-surface: #eef3ec; --s-surface-strong: #e1eadf; --s-line: #dfe7dc; --s-line-strong: #c3d0c0; --s-wash-1: #f9fbf8; --s-wash-2: #e9f1e6; --s-wash-3: #edf2eb; --s-row: #fafcf9; --s-blob: #d7ebcb; }
.tint-lime { --s-g-950: #172209; --s-g-900: #283a12; --s-g-850: #2e4316; --s-g-800: #364f19; --s-g-700: #486624; --s-g-600: #497615; --s-accent-strong: #395c10; --s-g-500: #65a021; --s-g-300: #a4d16f; --s-g-100: #e9f2df; --s-g-50: #f3f6ef; --s-deep-1: #466522; --s-deep-2: #3b561b; --s-deep-3: #324a16; --s-bg: #f8f9f6; --s-surface: #f0f2ec; --s-surface-strong: #e5e9df; --s-line: #e2e6dd; --s-line-strong: #c8cfc1; --s-wash-1: #fafbf8; --s-wash-2: #ecf0e7; --s-wash-3: #eff1eb; --s-row: #fbfcf9; --s-blob: #dde9ce; }
.tint-jade { --s-g-950: #082419; --s-g-900: #113c2c; --s-g-850: #144533; --s-g-800: #17513b; --s-g-700: #21694e; --s-g-600: #117a52; --s-accent-strong: #0d5f40; --s-g-500: #1ba471; --s-g-300: #6ed6af; --s-g-100: #e0f3ec; --s-g-50: #eff7f4; --s-deep-1: #1f684d; --s-deep-2: #185941; --s-deep-3: #144c37; --s-bg: #f6f9f8; --s-surface: #ecf3f1; --s-surface-strong: #dfeae6; --s-line: #dde7e3; --s-line-strong: #c1d0ca; --s-wash-1: #f8fbfa; --s-wash-2: #e7f1ed; --s-wash-3: #ebf2f0; --s-row: #f9fcfb; --s-blob: #cfebe1; }
.tint-forest { --s-g-950: #0d2005; --s-g-900: #19370c; --s-g-850: #1d3f0f; --s-g-800: #224a11; --s-g-700: #2f6019; --s-g-600: #286f09; --s-accent-strong: #1f5607; --s-g-500: #3ea512; --s-g-300: #7ed956; --s-g-100: #e4f4dd; --s-g-50: #f0f7ee; --s-deep-1: #2d5f18; --s-deep-2: #255112; --s-deep-3: #1f450e; --s-bg: #f7f9f6; --s-surface: #eef3ec; --s-surface-strong: #e2eade; --s-line: #dfe7db; --s-line-strong: #c4d0bf; --s-wash-1: #f9fbf8; --s-wash-2: #e9f1e5; --s-wash-3: #edf2eb; --s-row: #fafcf9; --s-blob: #d4ecca; }
.tint-mint { --s-g-950: #0f2318; --s-g-900: #1c3b2a; --s-g-850: #204431; --s-g-800: #265039; --s-g-700: #34674b; --s-g-600: #2a784d; --s-accent-strong: #205e3c; --s-g-500: #3ca26b; --s-g-300: #9acfb2; --s-g-100: #e7f1ec; --s-g-50: #f2f6f4; --s-deep-1: #32674a; --s-deep-2: #29573e; --s-deep-3: #224b35; --s-bg: #f7f9f8; --s-surface: #eef2f0; --s-surface-strong: #e3e9e5; --s-line: #e0e6e3; --s-line-strong: #c5cec9; --s-wash-1: #f9fbfa; --s-wash-2: #eaf0ed; --s-wash-3: #edf1ef; --s-row: #fafcfb; --s-blob: #d9e9e0; }
.tint-gold { --s-g-950: #1d210c; --s-g-900: #323817; --s-g-850: #3a401b; --s-g-800: #444b20; --s-g-700: #59622d; --s-g-600: #637121; --s-accent-strong: #4d5819; --s-g-500: #879930; --s-g-300: #beca81; --s-g-100: #eef0e2; --s-g-50: #f5f6f0; --s-deep-1: #58612b; --s-deep-2: #4a5222; --s-deep-3: #3f461d; --s-bg: #f8f9f7; --s-surface: #f1f2ed; --s-surface-strong: #e7e8e1; --s-line: #e4e5de; --s-line-strong: #cccdc2; --s-wash-1: #fafbf9; --s-wash-2: #eeefe8; --s-wash-3: #f0f1ec; --s-row: #fbfcfa; --s-blob: #e3e7d2; }
.tint-silver { --s-g-950: #19211c; --s-g-900: #2c3831; --s-g-850: #334038; --s-g-800: #3c4b42; --s-g-700: #4f6156; --s-g-600: #54715f; --s-accent-strong: #41584a; --s-g-500: #769883; --s-g-300: #b9c7be; --s-g-100: #edf0ee; --s-g-50: #f4f5f5; --s-deep-1: #4e6156; --s-deep-2: #425248; --s-deep-3: #38463d; --s-bg: #f8f8f8; --s-surface: #f1f2f1; --s-surface-strong: #e6e8e7; --s-line: #e3e5e4; --s-line-strong: #cacdcb; --s-wash-1: #fafafa; --s-wash-2: #edefee; --s-wash-3: #f0f1f0; --s-row: #fbfbfb; --s-blob: #e1e6e3; }

/* ---------- Asteikko sisällön muuttujiksi ---------- */
/* Johdetut muuttujat (--color-accent, --dark-surface …) on määriteltävä uudelleen tässä,
   koska :root laskee ne omista --g-arvoistaan. */
body[class*="tint-"] { background: var(--s-bg); }
body[class*="tint-"] main, body[class*="tint-"] .prefooter {
  --g-950: var(--s-g-950); --g-900: var(--s-g-900); --g-850: var(--s-g-850); --g-800: var(--s-g-800);
  --g-700: var(--s-g-700); --g-600: var(--s-g-600); --g-500: var(--s-g-500); --g-300: var(--s-g-300);
  --g-100: var(--s-g-100); --g-50: var(--s-g-50);
  --color-bg: var(--s-bg); --color-surface: var(--s-surface); --color-surface-strong: var(--s-surface-strong);
  --color-line: var(--s-line); --color-line-strong: var(--s-line-strong);
  --color-dark: var(--s-g-900); --color-dark-2: var(--s-g-800);
  --color-accent: var(--s-g-600); --color-accent-strong: var(--s-accent-strong);
  --color-accent-on-dark: var(--s-g-300); --color-accent-soft: var(--s-g-100); --color-brand-lime: var(--s-g-300);
  --dark-surface: radial-gradient(70% 90% at 85% 10%, rgb(var(--t) / 0.28) 0%, transparent 60%), linear-gradient(160deg, var(--s-g-850) 0%, var(--s-g-900) 55%, var(--s-g-950) 100%);
  --deep-card: var(--grid-lines), linear-gradient(150deg, var(--s-deep-1) 0%, var(--s-deep-2) 50%, var(--s-deep-3) 100%);
  --tint-wash: radial-gradient(60% 55% at 100% 0%, rgb(var(--t) / 0.06) 0%, transparent 70%);
}

/* ---------- Kiinteät vihreät → sävy ---------- */
/* Taustapesut */
main .families { background: radial-gradient(60% 50% at 100% 0%, rgb(var(--t) / 0.07) 0%, transparent 70%), linear-gradient(180deg, var(--color-bg) 0%, var(--s-wash-3) 100%); }
main .contact-cta { background: radial-gradient(50% 60% at 100% 50%, rgb(var(--t) / 0.08) 0%, transparent 70%), var(--color-bg); }
main .remote:not(.remote--lux) { background: radial-gradient(60% 70% at 100% 100%, rgb(var(--t) / 0.1) 0%, transparent 70%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%); }
main .hero--light.hero--plain .hero__bg { background: var(--grid-lines-light), radial-gradient(50% 80% at 90% 10%, rgb(var(--t) / 0.14) 0%, transparent 65%), linear-gradient(180deg, var(--s-wash-1) 0%, var(--s-wash-2) 100%); }
main .fam-sec:nth-of-type(odd) { background: var(--tint-wash), linear-gradient(180deg, var(--color-bg), var(--color-surface)); }
main .situations, main .terms-sec, main .why { background: var(--tint-wash), #fff; }
main .section--surface { background-image: var(--tint-wash); }
main .timeline-sec, main .calc-sec { background: radial-gradient(50% 80% at 0% 0%, rgb(var(--t) / 0.06) 0%, transparent 70%), linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); }
main .rtable tbody tr:nth-child(even) { background: var(--s-row); }

/* Tummat kortit */
main .fam-grid > li:nth-child(4) .fam, main .fam-grid > li:nth-child(5) .fam { --f-bg: var(--deep-card); }
@media (max-width: 1023px) {
  main .fam-grid > li:nth-child(4) .fam, main .fam-grid > li:nth-child(5) .fam { --f-bg: #fff; }
  main .fam-grid > li:nth-child(even) .fam { --f-bg: var(--deep-card); }
}
main .why__list > li:nth-child(even) .icard { background: var(--deep-card); }
main .fam::before { border-color: color-mix(in srgb, var(--g-900) 8%, transparent); }

/* Reunat, viivat ja korostukset */
@media (hover: hover) and (pointer: fine) { main .sit:hover { border-color: color-mix(in srgb, var(--g-600) 35%, transparent); } }
main .calc-opt.is-on { border-color: color-mix(in srgb, var(--g-600) 45%, transparent); }
main .btn--outline { --btn-border: color-mix(in srgb, var(--g-800) 35%, transparent); }
main .guide__text .eyebrow { border-color: rgb(var(--t2) / 0.4); background: rgb(var(--t2) / 0.08); }
main .build__tick { box-shadow: 0 0 0 6px rgb(var(--t) / 0.18); }
main .docs__blob { background: linear-gradient(140deg, var(--s-blob), rgb(var(--t) / 0.3)); }
main .docs__sheet--3 { background: var(--g-50); }
main .docs__sheet--2 { background: var(--s-wash-1); }
main .fi-land { stroke: color-mix(in srgb, var(--g-600) 45%, transparent); }
main .fi-dots { fill: color-mix(in srgb, var(--g-600) 16%, transparent); }
main .card::before, main .pkg::before { background: linear-gradient(150deg, rgb(var(--t2) / 0.55), rgb(220 230 225 / 0.15) 40%, rgb(var(--t) / 0.35)); }
@media (hover: hover) and (pointer: fine) { main .chip:hover { border-color: var(--g-600); } }
main .section--dark { background: radial-gradient(90% 120% at 100% 0%, rgb(var(--t) / 0.22) 0%, transparent 55%), var(--color-dark); }

/* Kohdistusrengas pysyy sinisenä (erottuu kaikista sävyistä) – ei muutoksia --color-focus:iin. */

/* Tumman ajanvarausnauhan pieni yläotsikko: vaaleampi, jotta kontrasti ≥ 4,5:1 myös liukuvärin vaaleimmassa kohdassa */
body:not(.page-home) main .guide .eyebrow { color: color-mix(in srgb, var(--g-300) 55%, #fff); }