/* learngerman.school design tokens, brand v2 "Die zweite Zeile, laut gedruckt" (assets/brand/BRAND.md).
   Inks come from the LingoSprint covers. Colour is a printed field, never a tint or an accent.
   Layer order is declared once here; our CSS never fights Salient's unlayered CSS on canvas pages. */
@layer lg.tokens, lg.base, lg.components, lg.portal, lg.motion, lg.utilities;

@layer lg.tokens {
	:root {
		/* Paper and ink: a book page, not a beige screen */
		--lg-white: #FFFFFF;
		--lg-black: #000000;
		--lg-grey: #5C5C5C;          /* 6.7:1 on white */
		--lg-grey-on-black: #B3B3B3; /* 9.6:1 on black */

		/* Cover inks (sampled from the books, 2026-10-29) */
		--lg-magenta: #E52F9B;  /* Design Systems & Pattern Libraries */
		--lg-pink:    #FF66C4;  /* its background */
		--lg-cobalt:  #265ACD;  /* Digital Marketing Fundamentals */
		--lg-violet:  #CB6CE6;  /* Establishing and Sustaining a Design System */
		--lg-lime:    #B0F153;  /* Analytics and User Experience */
		--lg-orange:  #FF5B1F;
		--lg-red:     #F2382B;
		--lg-mint:    #7FE0C2;

		/* Series → ink, and the colour text takes on that ink (≥ 4.5:1) */
		--lg-ux: var(--lg-magenta); --lg-ux-on: #000;
		--lg-mk: var(--lg-cobalt);  --lg-mk-on: #FFF;
		--lg-pm: var(--lg-lime);    --lg-pm-on: #000;
		--lg-it: var(--lg-violet);  --lg-it-on: #000;
		--lg-en: var(--lg-orange);  --lg-en-on: #000;
		--lg-ld: var(--lg-red);     --lg-ld-on: #000;
		--lg-hr: var(--lg-mint);    --lg-hr-on: #000;

		/* The current series (re-mapped by [data-series]) */
		--lg-ink-s: var(--lg-ux);
		--lg-ink-s-on: var(--lg-ux-on);

		/* Ground roles (re-mapped by [data-ground]) */
		--lg-ground: var(--lg-white);
		--lg-de: var(--lg-black);        /* German line, display */
		--lg-text: var(--lg-black);      /* body text, ≥ 4.5:1 */
		--lg-quiet: var(--lg-grey);      /* secondary text, ≥ 4.5:1 */
		--lg-slab: var(--lg-ink-s);      /* the second line is printed on this */
		--lg-on-slab: var(--lg-ink-s-on);
		--lg-rule: var(--lg-black);

		/* Legacy names used by older markup and the settings screen */
		--lg-paper: var(--lg-white); --lg-ink: var(--lg-black); --lg-muted: var(--lg-quiet);
		--lg-accent: var(--lg-ink-s); --lg-on-accent: var(--lg-ink-s-on); --lg-accent-text: var(--lg-black);

		/* The ratio: German is 1.16 × as long as its English (943 pairs from our books) */
		--lg-ratio: 1.16;

		/* Type: Fixel only */
		--lg-font-display: "Fixel Display", "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;
		--lg-font-text: "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;
		--lg-fs-1: 0.8125rem;
		--lg-fs-2: 0.9375rem;
		--lg-fs-3: 1.0625rem;
		--lg-fs-4: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
		--lg-fs-5: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
		--lg-fs-6: clamp(2rem, 1.4rem + 3vw, 3.6rem);
		--lg-fs-7: clamp(2.8rem, 1.6rem + 6vw, 6.5rem);
		--lg-fs-8: clamp(3.6rem, 1.5rem + 11vw, 12rem);
		--lg-fs-9: clamp(5rem, 1rem + 19vw, 20rem);   /* poster */
		--lg-lead-poster: .84;
		--lg-track-poster: -0.055em;
		--lg-measure: 62ch;

		/* Space */
		--lg-s-1: 4px; --lg-s-2: 8px; --lg-s-3: 12px; --lg-s-4: 16px; --lg-s-5: 24px;
		--lg-s-6: 32px; --lg-s-7: 48px; --lg-s-8: 64px; --lg-s-9: 96px; --lg-s-10: 144px;
		--lg-gutter: clamp(16px, 4vw, 56px);
		--lg-target: 44px;

		/* Motion: four durations; intensity set by settings, the OS setting always wins */
		--lg-motion: 1;
		--lg-d-1: 100ms; --lg-d-2: 200ms; --lg-d-3: 300ms; --lg-d-4: 400ms;
		--lg-ease: cubic-bezier(.2, 0, 0, 1);
		--lg-ease-out: cubic-bezier(.16, 1, .3, 1);
		--lg-ease-de: var(--lg-ease); --lg-ease-en: cubic-bezier(.3, 0, .2, 1);
	}

	/* Partner ink: the second field under a series ink (the unusual pairs from the covers) */
	:root { --lg-ink-p: var(--lg-cobalt); --lg-ink-p-on: #FFF; }
	[data-series="ux"] { --lg-ink-s: var(--lg-ux); --lg-ink-s-on: var(--lg-ux-on); --lg-ink-p: var(--lg-cobalt); --lg-ink-p-on: #FFF; }
	[data-series="mk"] { --lg-ink-s: var(--lg-mk); --lg-ink-s-on: var(--lg-mk-on); --lg-ink-p: var(--lg-pink); --lg-ink-p-on: #000; }
	[data-series="pm"] { --lg-ink-s: var(--lg-pm); --lg-ink-s-on: var(--lg-pm-on); --lg-ink-p: var(--lg-violet); --lg-ink-p-on: #000; }
	[data-series="it"] { --lg-ink-s: var(--lg-it); --lg-ink-s-on: var(--lg-it-on); --lg-ink-p: var(--lg-lime); --lg-ink-p-on: #000; }
	[data-series="en"] { --lg-ink-s: var(--lg-en); --lg-ink-s-on: var(--lg-en-on); --lg-ink-p: var(--lg-cobalt); --lg-ink-p-on: #FFF; }
	[data-series="ld"] { --lg-ink-s: var(--lg-ld); --lg-ink-s-on: var(--lg-ld-on); --lg-ink-p: var(--lg-pink); --lg-ink-p-on: #000; }
	[data-series="hr"] { --lg-ink-s: var(--lg-hr); --lg-ink-s-on: var(--lg-hr-on); --lg-ink-p: var(--lg-cobalt); --lg-ink-p-on: #FFF; }

	/* Grounds: a printed field. On a colour field, the second line goes on a white slab. */
	[data-ground] { background: var(--lg-ground); color: var(--lg-text); }
	[data-ground="white"]   { --lg-ground: var(--lg-white); --lg-de: #000; --lg-text: #000; --lg-quiet: var(--lg-grey); --lg-slab: var(--lg-ink-s); --lg-on-slab: var(--lg-ink-s-on); --lg-rule: #000; }
	[data-ground="black"]   { --lg-ground: var(--lg-black); --lg-de: #FFF; --lg-text: #FFF; --lg-quiet: var(--lg-grey-on-black); --lg-slab: var(--lg-ink-s); --lg-on-slab: var(--lg-ink-s-on); --lg-rule: #FFF; }
	[data-ground="series"]  { --lg-ground: var(--lg-ink-s); --lg-de: #000; --lg-text: var(--lg-ink-s-on); --lg-quiet: var(--lg-ink-s-on); --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: #000; }
	[data-ground="partner"] { --lg-ground: var(--lg-ink-p); --lg-de: var(--lg-ink-p-on); --lg-text: var(--lg-ink-p-on); --lg-quiet: var(--lg-ink-p-on); --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: var(--lg-ink-p-on); }
	[data-ground="magenta"] { --lg-ground: var(--lg-magenta); --lg-de: #000; --lg-text: #000; --lg-quiet: #000; --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: #000; }
	[data-ground="pink"]    { --lg-ground: var(--lg-pink); --lg-de: #000; --lg-text: #000; --lg-quiet: #000; --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: #000; }
	[data-ground="cobalt"]  { --lg-ground: var(--lg-cobalt); --lg-de: #000; --lg-text: #FFF; --lg-quiet: #FFF; --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: #000; }
	[data-ground="violet"]  { --lg-ground: var(--lg-violet); --lg-de: #000; --lg-text: #000; --lg-quiet: #000; --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: #000; }
	[data-ground="lime"]    { --lg-ground: var(--lg-lime); --lg-de: #000; --lg-text: #000; --lg-quiet: #000; --lg-slab: var(--lg-cobalt); --lg-on-slab: #FFF; --lg-rule: #000; }
	[data-ground="orange"]  { --lg-ground: var(--lg-orange); --lg-de: #000; --lg-text: #000; --lg-quiet: #000; --lg-slab: #FFF; --lg-on-slab: #000; --lg-rule: #000; }

	html[data-lg-motion="subtle"] { --lg-motion: .6; }
	html[data-lg-motion="off"] { --lg-motion: 0; }
	@media (prefers-reduced-motion: reduce) { :root, html[data-lg-motion] { --lg-motion: 0; } }
}