/* Väriteemat — brändiriippumaton johdotus. Semanttiset --froggy-* tokenit,
   joita lohkojen CSS käyttää.

   Tokenit sidotaan paletin SEMANTTISIIN slugeihin (primary, accent, ink,
   gray, white), ei brändin värinimiin. Slugien ARVOT tulevat aktiivisesta
   teematyylivariaatiosta: perus-theme.json antaa Fixuksen arvot (primary =
   sininen, accent = keltainen) ja styles/mekonomen.json omansa (primary =
   tumma, accent = Mekonomen-keltainen). Sama tiedosto pätee siis molemmille
   brändeille — vain slugien arvot vaihtuvat.

   Oletus on "Light"-moodi (valkoinen tausta). Osioiden vaihtoehtoiset taustat
   tulevat WP:n rekisteröimistä lohkotyylivariaatioista:

   .is-style-brand  styles/ensisijainen.json  — ensisijaisen värin osiotausta
   .is-style-accent   styles/korostus.json      — korostusvärin osiotausta

   Lohkojen ei koskaan tule lukea raakoja palettivärejä brändinimellä, vaan
   aina näitä --froggy-* tokeneita tai semanttisia slugeja. Näin toinen brändi
   (Mekonomen) toimii pelkällä teematyylivariaatiolla lohkoja muuttamatta.

   Teeman omat merkkiluokat (has-theme-background, has-transparent-content) EIVÄT
   ole is-style-*-nimiavaruudessa, koska mikään ei rekisteröi niitä
   lohkotyyleiksi — ks. CLAUDE.md 6. */

body {
	/* Light (oletus) — valkoinen tausta, ensisijainen otsikko (Fixus: sininen),
	   harmaa leipäteksti. */
	--froggy-heading: var(--wp--preset--color--primary);
	--froggy-paragraph: var(--wp--preset--color--gray);
	--froggy-link: var(--wp--preset--color--primary);
	--froggy-accent: var(--wp--preset--color--accent);
	--froggy-eyebrow-bg: var(--wp--preset--color--accent);
	--froggy-eyebrow-text: var(--wp--preset--color--primary);
	--froggy-icon-bg: var(--wp--preset--color--accent);
	--froggy-icon: var(--wp--preset--color--primary);
	--froggy-divider: var(--wp--preset--color--primary-15);

	--froggy-btn-primary-bg: var(--wp--preset--color--accent);
	--froggy-btn-primary-bg-hover: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 88%,
		#000
	);
	--froggy-btn-primary-text: var(--wp--preset--color--primary);
	--froggy-btn-secondary-border: var(--wp--preset--color--primary);
	--froggy-btn-secondary-border-hover: var(--wp--preset--color--accent);
	--froggy-btn-secondary-bg-hover: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 8%,
		transparent
	);
	--froggy-btn-secondary-text: var(--wp--preset--color--primary);
	--froggy-btn-simple-text: var(--wp--preset--color--primary);

	/* Erotinviivan alias (vanhat lohkot lukevat --froggy-border). */
	--froggy-border: var(--froggy-divider);

	/* Kortit ovat oletuksena valkoisia, harmaalla tekstillä. */
	--froggy-card-bg: var(--wp--preset--color--white);
	--froggy-card-text: var(--wp--preset--color--gray);

	/* Taustalaatikon (.has-theme-background) täyttö — ensisijainen väri.
	   Ensisijaisessa osiossa tämä kääntyy valkoiseksi (alla). */
	--froggy-box-bg: var(--wp--preset--color--primary);
}

/* Ensisijainen moodi — vaalea teksti tummalla ensisijaisella taustalla
   (Fixus: valkoinen teksti tummansinisellä). Sama tokenikääntö koskee
   taustalaatikkoa (.has-theme-background), jonka täyttö on oletuksena sama
   ensisijainen väri. Korostustokenit palautetaan tässä, jotta laatikko
   korostusosion sisällä ei peri korostusmoodin arvoja (esim. sininen painike
   sinisellä laatikolla). */
.is-style-brand,
.has-theme-background {
	color: var(--wp--preset--color--white);
	--froggy-accent: var(--wp--preset--color--accent);
	--froggy-eyebrow-bg: var(--wp--preset--color--accent);
	--froggy-eyebrow-text: var(--wp--preset--color--primary);
	--froggy-icon-bg: var(--wp--preset--color--accent);
	--froggy-icon: var(--wp--preset--color--primary);
	--froggy-btn-primary-bg: var(--wp--preset--color--accent);
	--froggy-btn-primary-bg-hover: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 88%,
		#000
	);
	--froggy-btn-primary-text: var(--wp--preset--color--primary);
	--froggy-btn-secondary-border: var(--wp--preset--color--primary);
	--froggy-btn-secondary-border-hover: var(--wp--preset--color--accent);
	--froggy-btn-secondary-bg-hover: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 8%,
		transparent
	);
	--froggy-btn-secondary-text: var(--wp--preset--color--primary);
	--froggy-btn-simple-text: var(--wp--preset--color--white);
	--froggy-heading: var(--wp--preset--color--white);
	--froggy-paragraph: var(--wp--preset--color--white);
	--froggy-link: var(--wp--preset--color--white);
	--froggy-divider: var(--wp--preset--color--white-15);
	--froggy-border: var(--froggy-divider);
	--froggy-card-text: var(--wp--preset--color--white);
}

/* Taustalaatikko (has-theme-background) — teeman oma merkkiluokka, ei WP:n
   has-background (ydin lisää sen jokaiselle lohkolle, jolle käyttäjä valitsee
   taustavärin). Asettavat: froggy/content (hasBackground) ja froggy/column
   (Kortti-tyyli). Täyttö tulee --froggy-box-bg-tokenista, tekstitokenit
   yllä olevasta ensisijaisen moodin säännöstä. */
.has-theme-background {
	background-color: var(--froggy-box-bg);
}

/* Ensisijaisessa osiossa sininen laatikko ei erottuisi taustasta, joten
   täyttö kääntyy valkoiseksi ja laatikon tokenit palaavat Light-moodin
   arvoihin. */
.is-style-brand {
	--froggy-box-bg: var(--wp--preset--color--white);
}

.is-style-brand .has-theme-background {
	color: var(--wp--preset--color--gray);
	--froggy-btn-simple-text: var(--wp--preset--color--primary);
	--froggy-heading: var(--wp--preset--color--primary);
	--froggy-paragraph: var(--wp--preset--color--gray);
	--froggy-link: var(--wp--preset--color--primary);
	--froggy-divider: var(--wp--preset--color--primary-15);
	--froggy-border: var(--froggy-divider);
	--froggy-card-text: var(--wp--preset--color--gray);
}

/* Korostus-moodi — ensisijainen teksti korostustaustalla, painike kääntyy
   ensisijaiseksi korostustekstillä (Fixus: sininen teksti keltaisella,
   sininen painike keltaisella tekstillä). */
.is-style-accent {
	color: var(--wp--preset--color--primary);
	--froggy-heading: var(--wp--preset--color--primary);
	--froggy-paragraph: var(--wp--preset--color--primary);
	--froggy-link: var(--wp--preset--color--primary);
	--froggy-accent: var(--wp--preset--color--primary);
	--froggy-eyebrow-bg: var(--wp--preset--color--primary);
	--froggy-eyebrow-text: var(--wp--preset--color--accent);
	--froggy-icon-bg: var(--wp--preset--color--white);
	--froggy-icon: var(--wp--preset--color--primary);
	--froggy-divider: var(--wp--preset--color--primary-15);
	--froggy-border: var(--froggy-divider);

	--froggy-btn-primary-bg: var(--wp--preset--color--primary);
	--froggy-btn-primary-bg-hover: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 88%,
		#000
	);
	--froggy-btn-primary-text: var(--wp--preset--color--accent);
	--froggy-btn-secondary-border: var(--wp--preset--color--primary);
	--froggy-btn-secondary-border-hover: var(--wp--preset--color--white);
	--froggy-btn-secondary-bg-hover: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 8%,
		transparent
	);
	--froggy-btn-secondary-text: var(--wp--preset--color--primary);
	--froggy-btn-simple-text: var(--wp--preset--color--primary);
}

/* Hero: sisältö kuvan päällä tummennusgradientin päällä → vaalea teksti,
   ei omaa taustaväriä. */
.has-transparent-content {
	color: var(--wp--preset--color--white);
	--froggy-heading: var(--wp--preset--color--white);
	--froggy-card-text: var(--wp--preset--color--white);
	--froggy-link: var(--wp--preset--color--white);
	--froggy-divider: var(--wp--preset--color--white-15);
	--froggy-border: var(--froggy-divider);
}

.wp-block-heading {
	color: var(--froggy-heading);
}