/**
 * Datic design tokens — classic (default) + premium_dark.
 * Laad ALTIJD classic; premium_dark overschrijft alleen variabelen.
 * Geen functionaliteit, alleen look.
 */

:root,
html[data-theme="classic"] {
	/* Surfaces */
	--datic-bg: #f3f1ed;
	--datic-bg-deep: #ebe7e1;
	--datic-surface: #ffffff;
	--datic-surface-elevated: #ffffff;
	--datic-surface-muted: #f7f5f1;
	--datic-nav-bg: #ffffff;

	/* Text */
	--datic-text: #1e1a17;
	--datic-text-muted: #6a635c;
	--datic-text-faint: #9a928a;
	--datic-on-accent: #ffffff;

	/* Borders / shadows */
	--datic-border: #e6e2dc;
	--datic-border-strong: #d4cfc7;
	--datic-shadow: 0 8px 24px rgba(30, 26, 23, 0.06);
	--datic-shadow-soft: 0 4px 14px rgba(30, 26, 23, 0.04);

	/* Accent (classic green brand) */
	--datic-accent: #5cb85c;
	--datic-accent-deep: #449d44;
	--datic-accent-soft: rgba(92, 184, 92, 0.16);
	--datic-accent-glow: rgba(92, 184, 92, 0.28);
	--datic-accent-alt: #2d8cde;
	--datic-cta-from: #5cb85c;
	--datic-cta-to: #449d44;

	/* Status */
	--datic-success: #449d44;
	--datic-warning: #c9a036;
	--datic-danger: #b91c1c;
	--datic-info: #2d8cde;

	/* Forms */
	--datic-input-bg: #ffffff;
	--datic-input-border: #e6e2dc;
	--datic-placeholder: #9a928a;

	/* Shape / type */
	--datic-radius: 16px;
	--datic-radius-sm: 10px;
	--datic-radius-pill: 999px;
	--datic-font: "Outfit", system-ui, sans-serif;
	--datic-display: "Fraunces", Georgia, "Times New Roman", serif;

	/* Ambient (classic: soft green dots feel) */
	--datic-ambient-1: rgba(92, 184, 92, 0.18);
	--datic-ambient-2: rgba(45, 140, 222, 0.10);
	--datic-warm-depth: transparent;
}

html[data-theme="premium_dark"] {
	/* Warm charcoal / espresso — not pure black */
	--datic-bg: #161310;
	--datic-bg-deep: #100e0c;
	--datic-surface: #1c1815;
	--datic-surface-elevated: #25201c;
	--datic-surface-muted: #181411;
	--datic-nav-bg: rgba(18, 15, 13, 0.94);

	--datic-text: #f2ebe3;
	--datic-text-muted: #a69c92;
	--datic-text-faint: #7d746c;
	--datic-on-accent: #1a1410;

	--datic-border: rgba(232, 220, 200, 0.11);
	--datic-border-strong: rgba(232, 220, 200, 0.18);
	--datic-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
	--datic-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.28);

	/* Champagne / warm gold — accent, not dominant */
	--datic-accent: #c9a36a;
	--datic-accent-deep: #b08a52;
	--datic-accent-soft: rgba(201, 163, 106, 0.14);
	--datic-accent-glow: rgba(201, 163, 106, 0.22);
	--datic-accent-alt: #8f6a5c;
	--datic-cta-from: #d4b07a;
	--datic-cta-to: #b08a52;

	/* Muted status on dark */
	--datic-success: #7d9a70;
	--datic-warning: #c9a036;
	--datic-danger: #c46b6b;
	--datic-info: #7a8fad;

	--datic-input-bg: #14110f;
	--datic-input-border: rgba(232, 220, 200, 0.14);
	--datic-placeholder: rgba(166, 156, 146, 0.7);

	--datic-radius: 16px;
	--datic-radius-sm: 10px;
	--datic-radius-pill: 999px;
	--datic-font: "Outfit", system-ui, sans-serif;
	--datic-display: "Fraunces", Georgia, "Times New Roman", serif;

	/* Subtle warm ambient (barely visible) */
	--datic-ambient-1: rgba(201, 163, 106, 0.07);
	--datic-ambient-2: rgba(90, 40, 48, 0.28);
	--datic-warm-depth: #2a1618;

	color-scheme: dark;
}