/**
 * @file
 * Metsälle: värit ja muut tokenit (korvaa Mercuryn src/theme.css:n).
 *
 * Mercury lataa tämän tiedoston teeman oman tilalle, kun se on webrootissa
 * (mercury/src/Hook/ThemeHooks.php, ks. mercury/CUSTOMIZING.md). Ilme ja
 * token-nimet: docs/ulkoasu.md. Tarkista tiedosto aina Mercuryn päivityksen
 * jälkeen, koska Mercury voi muuttaa tokeniensa nimiä.
 *
 * Tumma tila: Mercuryn .dark-lohkoa ei ole kopioitu tähän, eikä tumma tila
 * seuraa prefers-color-scheme-asetusta. Tumma pohja tulee vain ylä- ja
 * alatunnisteeseen sekä .tumma-luokalle (alla).
 */

:root {
  color-scheme: light;

  /* Metsälle-tokenit (docs/ulkoasu.md → Värit). Dokumentin `muted` on täällä
     --ink-muted, koska Mercuryllä on oma --muted (taustaväri). */
  --paper: #f5f1e8;
  --paper-2: #eae4d6;
  --line: #d6cfbd;
  --ink: #1c231e;
  --ink-muted: #5b6359;
  --forest: #1e3a2a;
  --forest-2: #2d5240;
  --forest-line: #4e6b5a;
  --on-forest: #f5f1e8;
  --on-forest-2: #d9d3c3;
  --yellow: #ffe000;

  --font-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat Brush", "Comic Sans MS", cursive;

  /* Mercuryn tokenit vaalealla pohjalla. Keltaista ei käytetä Mercuryn
     tokeneissa vaalealla pohjalla (kontrasti), vaan vain omissa luokissa. */
  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--paper-2);
  --card-foreground: var(--ink);
  --primary: var(--forest);
  --primary-foreground: var(--yellow);
  --secondary: var(--paper-2);
  --secondary-foreground: var(--ink);
  --muted: var(--paper-2);
  --muted-foreground: var(--ink-muted);
  --accent: var(--paper-2);
  --accent-foreground: var(--ink);
  --destructive: oklch(0.5 0.19 27);
  --destructive-foreground: oklch(1 0 0);
  --border: var(--line);
  --input: var(--line);
  /* --font-sans on Mercuryssa koko sivun oletusfontti (Tailwindin
     --default-font-family), joten se on leipätekstin fontti. Otsikot saavat
     Newsreaderin metsalle_ulkoasu/css/global.css:ssä. */
  --font-sans: "Source Sans 3", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-body: var(--font-sans);
  --font-serif: var(--font-heading);
  --font-mono: ui-monospace, "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.25rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* Tumma konteksti: ylä- ja alatunniste sekä .tumma-luokka. Mercuryn
   komponentit (valikot, mobiilivalikko, painikkeet) lukevat samoja tokeneita,
   joten ne muuttuvat tummiksi ilman omia sääntöjä. */
.region-header,
.region-footer,
.tumma {
  --background: var(--forest);
  --foreground: var(--on-forest);
  --card: var(--forest-2);
  --card-foreground: var(--on-forest);
  --primary: var(--forest-2);
  --primary-foreground: var(--yellow);
  --secondary: var(--forest-2);
  --secondary-foreground: var(--on-forest);
  --muted: var(--forest-2);
  --muted-foreground: var(--on-forest-2);
  --accent: var(--forest-2);
  --accent-foreground: var(--on-forest);
  --border: var(--forest-line);
  --input: var(--forest-line);

  background-color: var(--background);
  color: var(--foreground);
}