/**
 * DigitaVision design tokens: "Paper & Console" (spec 6.2).
 *
 * Light values live on :root. Dark values are declared twice with identical
 * contents: on :root[data-theme="dark"], which the theme-mode script sets
 * before first paint from the visitor's stored choice or else the OS
 * setting, and under prefers-color-scheme: dark for visitors without
 * JavaScript (the :not([data-theme="light"]) guard keeps it off for a
 * visitor on a dark OS who chose light). Keep the two dark blocks identical.
 *
 * Hex values are written uppercase; tests compare them as strings.
 * Custom properties only: element styles belong in theme.css.
 */

:root {
	/* Surfaces */
	--dv-bg-canvas: #F6F4EE;
	--dv-bg-subtle: #ECE8DF;
	--dv-bg-surface: #FFFFFF;
	--dv-border: #DED8CB;

	/* Text */
	--dv-ink: #221F1A;
	--dv-ink-2: #4A463F;
	--dv-ink-3: #67625A;

	/* Console panels: dark in both modes; separated by hairlines, never shadows */
	--dv-console: #0F1012;
	--dv-console-2: #17181C;
	--dv-console-3: #1F2127;
	--dv-console-ink: #F2F0EA;
	--dv-console-ink-2: #8C897F;
	--dv-console-border: #2A2D35;

	/* Brand: the single accent */
	--dv-brand: #DA2224;
	--dv-brand-hover: #B91C1C;
	--dv-brand-soft: #FEE2E2;

	/* Status and links */
	--dv-success: #1F9D6B;
	--dv-warning: #D67401;
	--dv-danger: #DA2224;
	--dv-link: #2B4CFF;

	/* Elevation: paper surfaces only */
	--dv-shadow-card: 0 1px 2px rgba(34,31,26,.06), 0 8px 24px -12px rgba(34,31,26,.18);
	--dv-shadow-lift: 0 2px 4px rgba(34,31,26,.08), 0 24px 48px -16px rgba(34,31,26,.28);

	/*
	 * Text on a brand fill. Declared once and resolved per mode: white on #DA2224
	 * is 5.0:1, but white on the dark-mode brand #EF4444 is only 3.8:1, so dark
	 * mode uses the dark surface (#17181C on #EF4444 is 4.7:1).
	 */
	--dv-on-brand: var(--dv-bg-surface);

	/* Type families (fallback faces are metric-adjusted in fonts.css) */
	--dv-font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
	--dv-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
	--dv-font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
	--dv-font-serif: "Instrument Serif", Georgia, serif;

	/* Type scale */
	--dv-text-display-xl: clamp(2.5rem, 1rem + 6.5vw, 7rem);
	--dv-text-display-l: clamp(2.25rem, 1rem + 4.5vw, 5rem);
	--dv-text-h1: 2.25rem;
	--dv-text-h2: 1.5rem;
	--dv-text-h3: 1.125rem;
	--dv-text-body-l: 1.125rem;
	--dv-text-body: 1rem;
	--dv-text-body-s: .875rem;
	--dv-text-label: .75rem;
	--dv-tracking-display: -0.03em;
	--dv-leading-display: .95;
	--dv-tracking-eyebrow: .06em;

	/* Space */
	--dv-space-1: 4px;
	--dv-space-2: 8px;
	--dv-space-3: 12px;
	--dv-space-4: 16px;
	--dv-space-5: 24px;
	--dv-space-6: 32px;
	--dv-space-7: 48px;
	--dv-space-8: 64px;
	--dv-space-9: 96px;

	/* Radius */
	--dv-radius-sm: 6px;
	--dv-radius-md: 10px;
	--dv-radius-lg: 16px;
	--dv-radius-xl: 24px;
	--dv-radius-full: 999px;

	/* Motion */
	--dv-ease: cubic-bezier(.2,.7,.2,1);
	--dv-dur-fast: 150ms;
	--dv-dur: 320ms;

	/*
	 * Astra global palette, re-pointed at the tokens so Astra, Spectra and
	 * WooCommerce elements follow the mode. Slot meanings as of Astra 4.8.9.
	 * The light hex values are also saved in the Astra settings so the editor
	 * and Customizer pickers match; these declarations win on the front end
	 * because this file loads after Astra's inline styles.
	 */
	--ast-global-color-0: var(--dv-brand);       /* Brand */
	--ast-global-color-1: var(--dv-brand-hover); /* Alternate brand (hover) */
	--ast-global-color-2: var(--dv-ink);         /* Headings */
	--ast-global-color-3: var(--dv-ink-2);       /* Text */
	--ast-global-color-4: var(--dv-bg-canvas);   /* Primary background */
	--ast-global-color-5: var(--dv-bg-subtle);   /* Secondary background */
	--ast-global-color-6: var(--dv-console);     /* Alternate background (dark contrast) */
	--ast-global-color-7: var(--dv-border);      /* Subtle background, borders */
	--ast-global-color-8: var(--dv-ink);         /* Other supporting (extra dark) */

	/* Astra hard-codes a light code-block background (#ECEFF3) that dark-mode ink cannot be read on. */
	--ast-code-block-background: var(--dv-bg-subtle);
}

/* Dark mode: set by the theme-mode script (stored choice, else the OS). Keep identical to the block below. */
:root[data-theme="dark"] {
	--dv-bg-canvas: #0F1012;
	--dv-bg-subtle: #17181C;
	--dv-bg-surface: #17181C;
	--dv-border: #2A2D35;
	--dv-ink: #F2F0EA;
	--dv-ink-2: #B8B5AD;
	--dv-ink-3: #8C897F;
	--dv-console: #17181C;
	--dv-console-2: #1F2127;
	--dv-console-3: #2A2D35;
	--dv-console-ink: #F2F0EA;
	--dv-console-ink-2: #8C897F;
	--dv-console-border: #343842;
	--dv-brand: #EF4444;
	--dv-brand-hover: #F87171;
	--dv-brand-soft: #3A1515;
	--dv-success: #34D399;
	--dv-warning: #FBBF24;
	--dv-danger: #EF4444;
	--dv-link: #8FA3FF;
	--dv-shadow-card: 0 0 0 1px #2A2D35;
	--dv-shadow-lift: 0 0 0 1px #343842;
}

/* Dark mode without JavaScript: the OS prefers dark. Keep identical to the block above. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--dv-bg-canvas: #0F1012;
		--dv-bg-subtle: #17181C;
		--dv-bg-surface: #17181C;
		--dv-border: #2A2D35;
		--dv-ink: #F2F0EA;
		--dv-ink-2: #B8B5AD;
		--dv-ink-3: #8C897F;
		--dv-console: #17181C;
		--dv-console-2: #1F2127;
		--dv-console-3: #2A2D35;
		--dv-console-ink: #F2F0EA;
		--dv-console-ink-2: #8C897F;
		--dv-console-border: #343842;
		--dv-brand: #EF4444;
		--dv-brand-hover: #F87171;
		--dv-brand-soft: #3A1515;
		--dv-success: #34D399;
		--dv-warning: #FBBF24;
		--dv-danger: #EF4444;
		--dv-link: #8FA3FF;
		--dv-shadow-card: 0 0 0 1px #2A2D35;
		--dv-shadow-lift: 0 0 0 1px #343842;
	}
}