/*
 * Lakeware design tokens, copied from lakeware-app/packages/ui/lib/tokens.css (design system v1).
 * The source stays authoritative; the website adds the --lw-cta tokens.
 * style.css is loaded after this file, so its :root palette wins where the names overlap.
 */

/* ─── Base Tokens (Light Mode — default) ───────────────────────────────────── */
:root {
	/* ── Core Brand Colors ── */
	--lw-petrol: #0d3b4f;
	--lw-petrol-rgb: 13 59 79;
	--lw-petrol-deep: #0d2b3e;
	--lw-petrol-deep-rgb: 13 43 62;
	--lw-deep-water: #062838;
	--lw-deep-water-rgb: 6 40 56;
	--lw-footer: #08202c;
	--lw-footer-rgb: 8 32 44;
	--lw-lake-mist: #cfe1e7;
	--lw-sand: #d9b087;
	--lw-sand-rgb: 217 176 135;
	--lw-sand-accent: #e8c9a6;
	--lw-sand-accent-rgb: 232 201 166;
	--lw-sand-border: #c9954e;
	--lw-sand-border-rgb: 201 149 78;
	--lw-white: #ffffff;

	/* ── CTA (Website-spezifisch — Grün, nicht im App-Design-System) ── */
	--lw-cta: #1a8a6e;
	--lw-cta-rgb: 26 138 110;
	--lw-cta-hover: #157a5e;
	--lw-cta-hover-rgb: 21 122 94;

	/* ── EU-Badge (offizielle EU-Flaggenfarbe, KEIN Brand-Token) ── */
	--lw-eu-blue: #003399;
	--lw-eu-blue-rgb: 0 51 153;

	/* ── Derived Semantic Colors (Light = white BG + deep-water text) ── */
	--lw-bg: #ffffff;
	--lw-bg-rgb: 255 255 255;
	--lw-surface: #ffffff;
	--lw-surface-rgb: 255 255 255;
	--lw-text: #062838;
	--lw-text-rgb: 6 40 56;
	--lw-text-muted: rgba(6, 40, 56, 0.7);
	--lw-border: rgba(6, 40, 56, 0.15);

	/* ── Typography ── */
	--lw-font-body: "IBM Plex Sans", system-ui, sans-serif;
	--lw-font-brand: "IBM Plex Sans", system-ui, sans-serif;
	--lw-font-mono: "JetBrains Mono", Menlo, Consolas, monospace;

	/* ── Soft surface / accent tints (per-theme semantic layers) ── */
	--lw-surface-soft: #f7fafb;
	--lw-accent-soft: #cfe1e7; /* = --lw-lake-mist */
	--lw-accent-softer: #eaf2f5;
}

/* ─── Sand Mode (warm sand surface, petrol ink — ratified 4th color design) ──── */
/* Werte aus public/assets/style.css [data-theme="sand"]-Block, auf --lw-* gemappt. */
[data-theme="sand"] {
	--lw-bg: #d9b087;
	--lw-bg-rgb: 217 176 135;
	--lw-surface: #e8c9a6;
	--lw-surface-rgb: 232 201 166;
	--lw-text: #062838;
	--lw-text-rgb: 6 40 56;
	--lw-text-muted: rgba(6, 40, 56, 0.75);
	--lw-border: #c99d6f;
	/* petrol/accent stays deep petrol on sand (CTA, links, buttons) */
	--lw-petrol: #0d3b4f;
	--lw-petrol-rgb: 13 59 79;
	--lw-petrol-deep: #062838;
	--lw-petrol-deep-rgb: 6 40 56;
	--lw-deep-water: #062838;
	--lw-deep-water-rgb: 6 40 56;
	/* sand accents read against the sand surface */
	--lw-sand: #e8c9a6;
	--lw-sand-rgb: 232 201 166;
	--lw-sand-border: #c99d6f;
	--lw-sand-border-rgb: 201 157 111;

	/* ── Soft tints in sand mode ── */
	--lw-surface-soft: #e8c9a6;
	--lw-accent-soft: #f3dec5;
	--lw-accent-softer: #efd4b5;
}

/* ─── Dark Mode ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
	--lw-bg: #0d3b4f;
	--lw-bg-rgb: 13 59 79;
	--lw-surface: #062838;
	--lw-surface-rgb: 6 40 56;
	--lw-text: #cfe1e7;
	--lw-text-rgb: 207 225 231;
	/* W2-fix: 0.6 opacity = ~5:1 on #062838 (borderline WCAG AA); 0.82 = ~7.8:1 ✓ WCAG AA */
	--lw-text-muted: rgba(207, 225, 231, 0.82);
	--lw-border: rgba(207, 225, 231, 0.12);
	/* Sand surfaces become deep-water in dark so sections stay legible */
	--lw-sand: #062838;
	--lw-sand-rgb: 6 40 56;
	--lw-sand-border: rgba(207, 225, 231, 0.12);
	--lw-petrol: #0d3b4f;
	--lw-petrol-rgb: 13 59 79;
	--lw-petrol-deep: #cfe1e7;
	--lw-petrol-deep-rgb: 207 225 231;
	--lw-footer: #020a10;
	--lw-footer-rgb: 2 10 16;

	/* ── Soft tints in dark mode ── */
	--lw-surface-soft: #103e52;
	--lw-accent-soft: #1a4a60;
	--lw-accent-softer: #164154;
}

/* ─── Midnight Mode (Deep Water + WHITE — Max Dark Contrast) ─────────────────── */
[data-theme="midnight"] {
	--lw-bg: #062838;
	--lw-bg-rgb: 6 40 56;
	--lw-surface: #0a1f2c;
	--lw-surface-rgb: 10 31 44;
	--lw-text: #ffffff;
	--lw-text-rgb: 255 255 255;
	/* W3-fix: 0.7 opacity = ~8.8:1 on #0a1f2c; 0.82 raises to ~10:1, consistent with dark fix */
	--lw-text-muted: rgba(255, 255, 255, 0.82);
	--lw-border: rgba(255, 255, 255, 0.12);
	--lw-sand: #0a1f2c;
	--lw-sand-rgb: 10 31 44;
	--lw-sand-border: rgba(255, 255, 255, 0.12);
	--lw-petrol: #0a1f2c;
	--lw-petrol-rgb: 10 31 44;
	--lw-petrol-deep: #ffffff;
	--lw-petrol-deep-rgb: 255 255 255;
	--lw-footer: #020a10;
	--lw-footer-rgb: 2 10 16;

	/* ── Soft tints in midnight mode ── */
	--lw-surface-soft: #03192a;
	--lw-accent-soft: #0a2c3e;
	--lw-accent-softer: #061f2e;
}

/* ─── High-Contrast Mode (WCAG 2.1 AAA — accessibility) ─────────────────────── */
/* bg=#fff / fg=#000 → 21:1. CTA + accent → dark blue #00008b → 15:1 on white. */
[data-theme="hc"] {
	--lw-bg: #ffffff;
	--lw-bg-rgb: 255 255 255;
	--lw-surface: #f0f0f0;
	--lw-surface-rgb: 240 240 240;
	--lw-text: #000000;
	--lw-text-rgb: 0 0 0;
	--lw-text-muted: #222222;
	--lw-border: #000000;
	--lw-petrol: #00008b;
	--lw-petrol-rgb: 0 0 139;
	--lw-petrol-deep: #000000;
	--lw-petrol-deep-rgb: 0 0 0;
	--lw-deep-water: #00008b;
	--lw-deep-water-rgb: 0 0 139;
	--lw-footer: #000000;
	--lw-footer-rgb: 0 0 0;
	--lw-sand: #f0f0f0;
	--lw-sand-rgb: 240 240 240;
	--lw-sand-accent: #5a3800;
	--lw-sand-accent-rgb: 90 56 0;
	--lw-sand-border: #000000;
	--lw-sand-border-rgb: 0 0 0;
	--lw-cta: #00008b;
	--lw-cta-rgb: 0 0 139;
	--lw-cta-hover: #000060;
	--lw-cta-hover-rgb: 0 0 96;
}

/* ─── print — auto-activated via @media print, no data-theme needed ─────────── */
@media print {
	:root {
		--lw-bg: #ffffff;
		--lw-bg-rgb: 255 255 255;
		--lw-surface: #ffffff;
		--lw-surface-rgb: 255 255 255;
		--lw-text: #000000;
		--lw-text-rgb: 0 0 0;
		--lw-text-muted: #333333;
		--lw-border: #cccccc;
		--lw-petrol: #000000;
		--lw-petrol-rgb: 0 0 0;
		--lw-petrol-deep: #000000;
		--lw-petrol-deep-rgb: 0 0 0;
		--lw-footer: #ffffff;
		--lw-footer-rgb: 255 255 255;
		--lw-cta: #000000;
		--lw-cta-rgb: 0 0 0;
	}
}

/* ─── System prefers-color-scheme (fallback when no data-theme set) ──────────── */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--lw-bg: #0d3b4f;
		--lw-bg-rgb: 13 59 79;
		--lw-surface: #062838;
		--lw-surface-rgb: 6 40 56;
		--lw-text: #cfe1e7;
		--lw-text-rgb: 207 225 231;
		--lw-text-muted: rgba(207, 225, 231, 0.82);
		--lw-border: rgba(207, 225, 231, 0.12);
		--lw-sand: #062838;
		--lw-sand-rgb: 6 40 56;
		--lw-sand-border: rgba(207, 225, 231, 0.12);
		--lw-petrol: #0d3b4f;
		--lw-petrol-rgb: 13 59 79;
		--lw-petrol-deep: #cfe1e7;
		--lw-petrol-deep-rgb: 207 225 231;
		--lw-footer: #020a10;
		--lw-footer-rgb: 2 10 16;
	}
}