/* Karijarvi Camping, colour schemes and the shared finish pass.
 *
 * Three jobs in one file, because they are really one decision.
 *
 *   1. A token contract. The site stylesheets stopped naming colours and name
 *      roles instead, so one palette can be swapped underneath all of them.
 *   2. Four alternative palettes, sampled from the same place as the
 *      originals. Chosen with data-teema on the html element.
 *   3. The typographic and edge work every proposal shares, kept in one place
 *      so a fix lands on all of them at once.
 *
 * Load order: this file comes after the site stylesheet. The palettes are
 * written :root[data-teema="..."] so they outrank the site's own :root block
 * on specificity too, not only on source order.
 *
 * THE CONTRACT
 *   --pohja        the page itself
 *   --pohja-rgb    the same value as three numbers, for building veils
 *   --pinta        a band that sits off the page, one step away
 *   --pinta-rgb    and the same value as three numbers
 *   --syva         the deepest surface: a photograph mat, a footer plate
 *   --viiva        hairline
 *   --otsikko      headings, the strongest text on the page
 *   --teksti       body
 *   --teksti-2     secondary body, the colour long paragraphs are set in
 *   --teksti-3     captions and the small uppercase labels
 *   --korostus     the one accent
 *   --korostus-ink text that sits on top of the accent
 *   --jalka-*      the footer plate, for the pages whose footer inverts
 *   --usva-a..d    the mist, four values written as "r g b" from 0 to 255
 *   --usva-voima   how much of it there is, 1 on a dark page and far less
 *                  on a pale one, where grey haze stops being light and
 *                  starts being dirt
 *
 * Every text token is measured against every surface token it can land on,
 * at WCAG AA or better. The four palettes below were checked before they
 * shipped and the measured ratios are in the comment on each one.
 */

/* =========================================================================
   FOUR ALTERNATIVE PALETTES
   Structure, type and spacing do not move. Only these values do.
   ========================================================================= */

/* Kuusikko. The spruce mass in leirintaalue.jpg at its darkest, with the pale
   band off the horizon in kokko.jpg as the accent. Darker and colder than
   Usva, and its accent is water rather than light.
   otsikko 16.2  teksti 14.0  teksti-2 8.5  teksti-3 5.3  korostus 8.9 */
:root[data-teema="kuusikko"],
[data-teema-lappu="kuusikko"] {
  --pohja: #10150f;      --pohja-rgb: 16 21 15;
  --pinta: #161c14;      --pinta-rgb: 22 28 20;
  --syva: #1d241a;
  --viiva: #2b3327;
  --otsikko: #eef1e9;
  --teksti: #dde2d6;
  --teksti-2: #a9b3a2;
  --teksti-3: #818c7b;
  --korostus: #8fbcc4;
  --korostus-ink: #10150f;
  --jalka-pohja: #0c100b;  --jalka-rgb: 12 16 11;
  --jalka-otsikko: #eef1e9;
  --jalka-teksti: #dde2d6;
  --jalka-teksti-2: #a9b3a2;
  --jalka-teksti-3: #818c7b;
  --jalka-korostus: #8fbcc4;
  --usva-a: 190 214 216;  --usva-b: 158 186 190;
  --usva-c: 124 152 158;  --usva-d: 96 122 130;
  --usva-voima: 1;
}

/* Kesayo. Half past eleven in June: the sky token out of base.css, the pale
   horizon band, and the sun still sitting on the treeline as the accent.
   otsikko 15.7  teksti 13.6  teksti-2 8.3  teksti-3 5.1  korostus 7.9 */
:root[data-teema="kesayo"],
[data-teema-lappu="kesayo"] {
  --pohja: #0e1a26;      --pohja-rgb: 14 26 38;
  --pinta: #132433;      --pinta-rgb: 19 36 51;
  --syva: #182c3d;
  --viiva: #25394a;
  --otsikko: #eef3f4;
  --teksti: #dae4e8;
  --teksti-2: #a3b5bf;
  --teksti-3: #7b8d98;
  --korostus: #e0a25a;
  --korostus-ink: #0e1a26;
  --jalka-pohja: #0a1420;  --jalka-rgb: 10 20 32;
  --jalka-otsikko: #eef3f4;
  --jalka-teksti: #dae4e8;
  --jalka-teksti-2: #a3b5bf;
  --jalka-teksti-3: #7b8d98;
  --jalka-korostus: #e0a25a;
  --usva-a: 232 196 156;  --usva-b: 206 168 138;
  --usva-c: 150 154 168;  --usva-d: 108 124 148;
  --usva-voima: 1;
}

/* Selka. The open water on a flat grey day, which is most days. Cool paper,
   ink, and the lake blue off laituri.jpg carried through as the accent.
   otsikko 15.6  teksti 13.6  teksti-2 6.3  teksti-3 5.6  korostus 6.6 */
:root[data-teema="selka"],
[data-teema-lappu="selka"] {
  --pohja: #eef1f0;      --pohja-rgb: 238 241 240;
  --pinta: #e3e8e8;      --pinta-rgb: 227 232 232;
  --syva: #d7dedd;
  --viiva: #c3ccca;
  --otsikko: #12191c;
  --teksti: #1d262a;
  --teksti-2: #4e5a5f;
  --teksti-3: #576165;
  --korostus: #1d5a78;
  --korostus-ink: #f2f6f7;
  --jalka-pohja: #151d20;  --jalka-rgb: 21 29 32;
  --jalka-otsikko: #eff3f3;
  --jalka-teksti: #cfd8d8;
  --jalka-teksti-2: #93a0a2;
  --jalka-teksti-3: #93a0a2;
  --jalka-korostus: #5f9cb8;
  /* Lighter than the page, not darker, or every puff is a smudge. */
  --usva-a: 248 251 251;  --usva-b: 240 245 245;
  --usva-c: 231 238 238;  --usva-d: 222 231 232;
  --usva-voima: 0.4;
}

/* Kaarna. Birch bark and the gravel road, with the red off the entrance sign.
   Warm without going to brass: the ink is spruce rather than brown.
   otsikko 14.2  teksti 12.5  teksti-2 5.9  teksti-3 5.7  korostus 7.2 */
:root[data-teema="kaarna"],
[data-teema-lappu="kaarna"] {
  --pohja: #eeeae2;      --pohja-rgb: 238 234 226;
  --pinta: #e4dfd4;      --pinta-rgb: 228 223 212;
  --syva: #d8d2c5;
  --viiva: #c9c2b4;
  --otsikko: #1b1d17;
  --teksti: #252820;
  --teksti-2: #565a4b;
  --teksti-3: #585d46;
  --korostus: #8a2b1c;
  --korostus-ink: #f4efe8;
  --jalka-pohja: #1b1d17;  --jalka-rgb: 27 29 23;
  --jalka-otsikko: #f1ede5;
  --jalka-teksti: #d7d2c6;
  --jalka-teksti-2: #9a9a89;
  --jalka-teksti-3: #9a9a89;
  --jalka-korostus: #d0674c;
  /* Lighter than the page, not darker, or every puff is a smudge. */
  --usva-a: 252 249 244;  --usva-b: 246 241 233;
  --usva-c: 240 234 222;  --usva-d: 233 226 211;
  --usva-voima: 0.4;
}

/* =========================================================================
   FIVE MORE
   Added later, for every proposal. Same contract as the four above; ratios
   measured the same way, the worst case of each text role against pohja,
   pinta and syva. Three are light (Sammal, Mustikka, Selkea) and two dark
   (Hamara, Nuotio); a proposal with its own per-palette rules lists them
   with the matching originals.
   ========================================================================= */

/* Sammal. The moss under the spruces on the shore path. A light page with a
   deep green accent.
   otsikko 12.0  teksti 10.4  teksti-2 5.6  teksti-3 4.8  korostus 5.1 */
:root[data-teema="sammal"],
[data-teema-lappu="sammal"] {
  --pohja: #EEF1E8;      --pohja-rgb: 238 241 232;
  --pinta: #E3E8DB;      --pinta-rgb: 227 232 219;
  --syva: #D6DDCB;
  --viiva: #C3CCB5;
  --otsikko: #172015;
  --teksti: #222C1F;
  --teksti-2: #4A5645;
  --teksti-3: #535F4D;
  --korostus: #37602F;
  --korostus-ink: #F3F6EE;
  --jalka-pohja: #1A2417;  --jalka-rgb: 26 36 23;
  --jalka-otsikko: #EEF2E8;
  --jalka-teksti: #D3DBCB;
  --jalka-teksti-2: #9EAA95;
  --jalka-teksti-3: #9EAA95;
  --jalka-korostus: #9CC58E;
  --usva-a: 248 250 246;  --usva-b: 240 244 238;
  --usva-c: 231 236 228;  --usva-d: 222 229 218;
  --usva-voima: 0.4;
}

/* Mustikka. Bilberry: the blue-violet of the berries in the forest behind
   the aitat, on a cool pale page.
   otsikko 12.3  teksti 10.8  teksti-2 5.9  teksti-3 5.2  korostus 6.3 */
:root[data-teema="mustikka"],
[data-teema-lappu="mustikka"] {
  --pohja: #F0EFF4;      --pohja-rgb: 240 239 244;
  --pinta: #E5E3ED;      --pinta-rgb: 229 227 237;
  --syva: #D9D6E4;
  --viiva: #C7C3D6;
  --otsikko: #1A1728;
  --teksti: #25213A;
  --teksti-2: #4F4A66;
  --teksti-3: #57526E;
  --korostus: #4A3C8C;
  --korostus-ink: #F4F2FA;
  --jalka-pohja: #1E1A30;  --jalka-rgb: 30 26 48;
  --jalka-otsikko: #F1EFF8;
  --jalka-teksti: #D6D2E6;
  --jalka-teksti-2: #A39DBE;
  --jalka-teksti-3: #A39DBE;
  --jalka-korostus: #B3A6F0;
  --usva-a: 250 249 252;  --usva-b: 243 241 247;
  --usva-c: 235 233 242;  --usva-d: 227 224 236;
  --usva-voima: 0.4;
}

/* Selkea. Plain and high contrast, for reading in bright sun on a phone, or
   for anyone who wants the strongest contrast the page can give.
   otsikko 16.8  teksti 16.8  teksti-2 13.2  teksti-3 10.1  korostus 6.4 */
:root[data-teema="selkea"],
[data-teema-lappu="selkea"] {
  --pohja: #FFFFFF;      --pohja-rgb: 255 255 255;
  --pinta: #F2F2F2;      --pinta-rgb: 242 242 242;
  --syva: #E6E6E6;
  --viiva: #8A8A8A;
  --otsikko: #000000;
  --teksti: #000000;
  --teksti-2: #1F1F1F;
  --teksti-3: #333333;
  --korostus: #0B4F9C;
  --korostus-ink: #FFFFFF;
  --jalka-pohja: #000000;  --jalka-rgb: 0 0 0;
  --jalka-otsikko: #FFFFFF;
  --jalka-teksti: #FFFFFF;
  --jalka-teksti-2: #E0E0E0;
  --jalka-teksti-3: #E0E0E0;
  --jalka-korostus: #7FB2FF;
  --usva-a: 255 255 255;  --usva-b: 250 250 250;
  --usva-c: 244 244 244;  --usva-d: 238 238 238;
  --usva-voima: 0.25;
}

/* Hamara. Dusk after the sauna: a plum-dark page and the rose the sky over
   the lake turns before the blue comes.
   otsikko 12.7  teksti 10.7  teksti-2 6.6  teksti-3 5.0  korostus 7.3 */
:root[data-teema="hamara"],
[data-teema-lappu="hamara"] {
  --pohja: #1D1824;      --pohja-rgb: 29 24 36;
  --pinta: #251F2E;      --pinta-rgb: 37 31 46;
  --syva: #2D2638;
  --viiva: #3B3347;
  --otsikko: #F4EEF5;
  --teksti: #E3DAE6;
  --teksti-2: #B8ABBE;
  --teksti-3: #A092A8;
  --korostus: #EFA3B8;
  --korostus-ink: #1D1824;
  --jalka-pohja: #16121C;  --jalka-rgb: 22 18 28;
  --jalka-otsikko: #F4EEF5;
  --jalka-teksti: #E3DAE6;
  --jalka-teksti-2: #B8ABBE;
  --jalka-teksti-3: #B8ABBE;
  --jalka-korostus: #EFA3B8;
  --usva-a: 222 196 214;  --usva-b: 190 164 190;
  --usva-c: 150 130 160;  --usva-d: 112 98 130;
  --usva-voima: 1;
}

/* Nuotio. The campfire seen from the dark: charred wood and one ember.
   otsikko 13.6  teksti 11.7  teksti-2 7.1  teksti-3 5.3  korostus 6.5 */
:root[data-teema="nuotio"],
[data-teema-lappu="nuotio"] {
  --pohja: #1A1512;      --pohja-rgb: 26 21 18;
  --pinta: #221C18;      --pinta-rgb: 34 28 24;
  --syva: #2A231E;
  --viiva: #3A302A;
  --otsikko: #F6EFE8;
  --teksti: #E8DED4;
  --teksti-2: #BBAE9F;
  --teksti-3: #A29585;
  --korostus: #F0914F;
  --korostus-ink: #1A1512;
  --jalka-pohja: #120E0C;  --jalka-rgb: 18 14 12;
  --jalka-otsikko: #F6EFE8;
  --jalka-teksti: #E8DED4;
  --jalka-teksti-2: #BBAE9F;
  --jalka-teksti-3: #BBAE9F;
  --jalka-korostus: #F0914F;
  --usva-a: 236 196 160;  --usva-b: 204 164 130;
  --usva-c: 150 124 104;  --usva-d: 110 92 80;
  --usva-voima: 1;
}

/* =========================================================================
   HERO ON A PHOTOGRAPH
   On Selka and Kaarna the page is pale, so --otsikko and --teksti are ink.
   But a hero with a .kansi-varjo is copy laid over a photograph under a dark
   veil, and the veil does not follow the palette. Ink on that is unreadable.

   So inside such a hero the text roles are handed the footer plate's values,
   which every palette already declares as light-on-dark. The dark palettes
   need nothing: their own tokens are already light. Heroes without a
   .kansi-varjo (the split ones, text beside the photo on the page colour)
   are not matched and keep the ink.
   ========================================================================= */

:root[data-teema="selka"] .kansi:has(> .kansi-varjo),
:root[data-teema="kaarna"] .kansi:has(> .kansi-varjo),
:root[data-teema="sammal"] .kansi:has(> .kansi-varjo),
:root[data-teema="mustikka"] .kansi:has(> .kansi-varjo),
:root[data-teema="selkea"] .kansi:has(> .kansi-varjo) {
  --otsikko: var(--jalka-otsikko);
  --teksti: var(--jalka-teksti);
  --teksti-2: var(--jalka-teksti-2);
  --teksti-3: var(--jalka-teksti-3);
  --korostus: var(--jalka-korostus);
  --korostus-ink: var(--jalka-pohja);
  color: var(--teksti);
}

/* =========================================================================
   TYPE
   The proposals each pick their own face. What they share is the setting:
   how a line breaks, where the underline sits, and what happens to a Finnish
   compound word in a column 320 px wide.
   ========================================================================= */

h1, h2, h3, .nimet, .iso-teksti, .kansi h1 {
  text-wrap: balance;
  font-optical-sizing: auto;
}

p, li, dd, dt, figcaption, blockquote {
  text-wrap: pretty;
}

/* Quotes and the opening bracket hang into the margin where the browser can
   do it, so the left edge of a paragraph is actually straight. */
:root { hanging-punctuation: first allow-end last; }

/* Finnish stacks four nouns into one word and then asks a 320 px column to
   carry it. Below the two column breakpoint, let it break. lang="fi" on the
   html element is what picks the right dictionary, and every page sets it. */
@media (max-width: 46rem) {
  p, li, dd, .iso-teksti, .alle, .kuvaus, .taulu-huomio {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* The underlines were sitting on the baseline and cutting the descenders of
   j and y, which Finnish has a great many of. */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: auto;
}

/* Every figure on these pages is read off rather than read, so the digits
   line up in a column whatever they happen to be. */
.numero, .rivi dd b, .rivi dd, .ylin-puh, .taulu dd, .milloin,
.pika dd, .rail-faktat dd, .inventaario b, .hinta {
  font-variant-numeric: tabular-nums lining-nums;
}

/* The small uppercase labels were tracked out far enough to read as gaps
   between letters. Pulled back, and given the muted role rather than a hand
   picked grey that stops tracking the palette. */
.ryhma h3, .listat h3, .palvelut h3, .palvelu-sarake h3,
.taulu dt, .rail-faktat dt, .jalka h2 {
  letter-spacing: 0.075em;
  font-variant-numeric: lining-nums;
}

/* Selection and focus follow the palette instead of staying frozen at the
   one the proposal happened to be drawn in. */
::selection { background: var(--korostus); color: var(--korostus-ink); }
:focus-visible { outline-color: var(--korostus); }

/* =========================================================================
   EDGES
   The proposals were built out of rectangles meeting other rectangles on a
   hard line. These are the pieces that soften the meeting without losing the
   structure underneath it.
   ========================================================================= */

/* A rule that fades out before it reaches either end, so a section is
   separated from the next one without being boxed off from it. It rides on
   the border the proposals already draw, so nothing moves.

   Only the long ones. A heading underline is a column wide and reads fine as
   a crisp line, and fading something that short just looks unsure of itself.
   The vertical rules are handled where they live, because a horizontal
   gradient sliced on to a right hand border comes out empty. */
.lohko,
.kausi > li,
.kausi > li:last-child,
.jalka {
  border-image: linear-gradient(to right,
    rgb(var(--pohja-rgb) / 0) 0%,
    var(--viiva) 4%,
    var(--viiva) 82%,
    rgb(var(--pohja-rgb) / 0) 100%) 1;
}

/* The note pulled out of the reading keeps its rule, but the rule fades down
   the way it fades sideways everywhere else, so the note is marked rather
   than fenced. Harmless on the proposals whose note is a filled block
   instead: they draw no border for this to ride on. */
.huomio {
  border-image: linear-gradient(to bottom,
    var(--korostus) 0%,
    var(--korostus) 55%,
    rgb(var(--pohja-rgb) / 0) 100%) 1;
}

/* Photograph mats. The shadow is tinted to the page rather than being black,
   and it is wider and weaker than it was, so a frame reads as sitting on the
   page instead of being cut into it. */
.kehys-levy {
  background: var(--syva);
  box-shadow:
    0 1px 2px rgb(var(--pohja-rgb) / 0.4),
    0 28px 60px -28px rgb(var(--pohja-rgb) / 0.75);
}

/* =========================================================================
   THE LANGUAGE SWITCH
   FI | EN, built by assets/js/kieli.js. Sits in the corner the palette
   switcher used to: right, not left, because every hero sets its copy
   against the left edge and bottom left is where that copy ends up.
   ========================================================================= */

.kielinappi {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 60;
  display: flex;
  padding: 0.2rem;
  gap: 0.15rem;
  background: var(--pinta);
  border: 1px solid var(--viiva);
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.35);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.kielinappi button {
  min-width: 2.5rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.6rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--teksti-3);
  cursor: pointer;
}
.kielinappi button:hover { color: var(--otsikko); background: var(--syva); }
.kielinappi button[aria-pressed="true"] { background: var(--otsikko); color: var(--pinta); }
.kielinappi button:focus-visible { outline: 2px solid var(--korostus); outline-offset: 1px; }
.kielinappi button:active { transform: translateY(1px); }

@media print { .kielinappi { display: none; } }