/*
 * Design tokens. Values verbatim from Beursdirect Site.dc.html.
 * Dark is the default on bare :root; light is opt-in via data-theme="light",
 * set before first paint by the inline script in header.php.
 */

:root {
	color-scheme: dark;
	--bg: oklch(0.16 0.012 265);
	--bg-deep: oklch(0.12 0.01 265);
	--bg-soft: oklch(0.185 0.013 265);
	--bg-card: oklch(0.21 0.014 265);
	--bg-chip: oklch(0.24 0.014 265);
	--stripe-b: oklch(0.2 0.012 265);
	--line: oklch(0.28 0.014 265);
	--line-2: oklch(0.3 0.014 265);
	--line-3: oklch(0.32 0.014 265);
	--line-4: oklch(0.34 0.014 265);
	--line-5: oklch(0.24 0.012 265);
	--line-6: oklch(0.4 0.014 265);
	--line-7: oklch(0.55 0.02 265);
	--ink: oklch(0.97 0.003 265);
	--ink-2: oklch(0.85 0.008 265);
	--ink-3: oklch(0.78 0.008 265);
	--ink-4: oklch(0.73 0.008 265);
	--mute: oklch(0.62 0.008 265);
	--faint: oklch(0.55 0.008 265);
	--accent: oklch(0.8 0.13 210);
	--accent-hover: oklch(0.88 0.11 210);
	--on-accent: oklch(0.16 0.03 240);
	--cat-beleggen: oklch(0.8 0.12 210);
	--cat-sparen: oklch(0.82 0.13 150);
	--cat-crowdfunding: oklch(0.75 0.15 330);
	--cat-default: var(--line-7);
}

:root[data-theme="light"] {
	color-scheme: light;
	--bg: oklch(0.99 0.002 265);
	--bg-deep: oklch(0.955 0.004 265);
	--bg-soft: oklch(0.97 0.004 265);
	--bg-card: oklch(0.965 0.005 265);
	--bg-chip: oklch(0.92 0.006 265);
	--stripe-b: oklch(0.955 0.005 265);
	--line: oklch(0.885 0.005 265);
	--line-2: oklch(0.86 0.005 265);
	--line-3: oklch(0.84 0.006 265);
	--line-4: oklch(0.82 0.006 265);
	--line-5: oklch(0.9 0.004 265);
	--line-6: oklch(0.72 0.01 265);
	--line-7: oklch(0.6 0.02 265);
	--ink: oklch(0.2 0.015 265);
	--ink-2: oklch(0.29 0.014 265);
	--ink-3: oklch(0.35 0.013 265);
	--ink-4: oklch(0.41 0.012 265);
	--mute: oklch(0.48 0.012 265);
	--faint: oklch(0.56 0.012 265);
	--accent: oklch(0.48 0.15 245);
	--accent-hover: oklch(0.38 0.15 245);
	--on-accent: oklch(0.99 0.004 245);
	--cat-beleggen: oklch(0.45 0.15 245);
	--cat-sparen: oklch(0.42 0.13 155);
	--cat-crowdfunding: oklch(0.45 0.19 340);
}

/*
 * Browsers without oklch() (Safari < 15.4, Chrome < 111, Firefox < 113) would
 * accept the custom properties above but then fail every var() at use time,
 * leaving text and backgrounds transparent. Hex conversions of the same values.
 */
@supports not (color: oklch(0 0 0)) {
	:root {
		--bg: #0b0d13;
		--bg-deep: #040609;
		--bg-soft: #101319;
		--bg-card: #15181f;
		--bg-chip: #1c1f26;
		--stripe-b: #13161c;
		--line: #252930;
		--line-2: #2a2e35;
		--line-3: #2f333a;
		--line-4: #34383f;
		--line-5: #1c1f25;
		--line-6: #44484f;
		--line-7: #6c727e;
		--ink: #f4f5f7;
		--ink-2: #cbced3;
		--ink-3: #b5b7bd;
		--ink-4: #a5a8ad;
		--mute: #84868b;
		--faint: #6f7276;
		--accent: #2fd4ec;
		--accent-hover: #75ebff;
		--on-accent: #020f19;
		--cat-beleggen: #47d2e8;
		--cat-sparen: #83dc97;
		--cat-crowdfunding: #e289db;
	}

	:root[data-theme="light"] {
		--bg: #fbfcfd;
		--bg-deep: #eff0f3;
		--bg-soft: #f4f5f8;
		--bg-card: #f2f3f7;
		--bg-chip: #e2e4e9;
		--stripe-b: #eef0f4;
		--line: #d7d9dc;
		--line-2: #cfd1d4;
		--line-3: #c8cace;
		--line-4: #c2c4c8;
		--line-5: #dddee1;
		--line-6: #a1a5ab;
		--line-7: #7a808d;
		--ink: #13161d;
		--ink-2: #282b33;
		--ink-3: #373b42;
		--ink-4: #474a51;
		--mute: #5a5e65;
		--faint: #71747c;
		--accent: #0061ab;
		--accent-hover: #00448b;
		--on-accent: #fafcfe;
		--cat-beleggen: #0058a1;
		--cat-sparen: #00602a;
		--cat-crowdfunding: #930975;
	}
}