/*
 * Thrive-O design tokens.
 * Layer 1: raw brand values from the Thrive-O Design System.
 * Layer 2: semantic tokens, switched by [data-theme] (dark is the fallback).
 * Layer 3: public plugin bridge (--thriveo-color-*, --thriveo-radius, --thriveo-font-*, --thriveo-space-*),
 *          documented in the theme documentation. Components use only layers 2 and 3.
 */

:root {
	--brand-cyan: #12d9e3;
	--brand-cyan-hover: #0fc3cc;
	--brand-cyan-press: #0ba8b0;
	--brand-cyan-light: #7de1e6;
	--brand-cyan-pale: #ccf4f6;
	--brand-green: #12e3a7;
	--brand-blue: #1297e3;
	--brand-blue-deep: #003ea8;
	--brand-navy: #222f4c;
	--brand-navy-deep: #171f32;
	--brand-navy-ink: #0d1320;
	--brand-ocean: #0b3d5a;
	--brand-white-soft: #fafafa;
	--brand-white: #ffffff;
	--brand-neutral-100: #f4f6fa;
	--brand-neutral-300: #d8dde6;
	--brand-neutral-400: #aab2c2;
	--brand-neutral-500: #7a8398;
	--brand-neutral-600: #525a6e;
	--brand-subtle-dark: #1d263d;
	--brand-border-dark: #6b7a99;
	--brand-teal-ink: #0a6c73;
	--brand-success-ink: #0b6e52;
	--brand-error-dark: #ff8a8f;
	--brand-error-ink: #c62f34;
	--brand-warning: #f5a524;
	--brand-warning-ink: #8a5a00;

	--thriveo-font-heading: "KoHo", "Atkinson Hyperlegible Next", system-ui, sans-serif;
	--thriveo-font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
	--thriveo-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--thriveo-radius-xs: 4px;
	--thriveo-radius-sm: 8px;
	--thriveo-radius-md: 12px;
	--thriveo-radius-lg: 16px;
	--thriveo-radius-xl: 24px;
	--thriveo-radius-pill: 999px;
	--thriveo-radius: var(--thriveo-radius-sm);

	--thriveo-space-1: 0.25rem;
	--thriveo-space-2: 0.5rem;
	--thriveo-space-3: 0.75rem;
	--thriveo-space-4: 1rem;
	--thriveo-space-5: 1.25rem;
	--thriveo-space-6: 1.5rem;
	--thriveo-space-8: 2rem;
	--thriveo-space-10: 2.5rem;
	--thriveo-space-12: 3rem;
	--thriveo-space-16: 4rem;
	--thriveo-space-20: 5rem;
	--thriveo-space-24: 6rem;
	--thriveo-space: var(--thriveo-space-4);
	--thriveo-section-padding: clamp(2.5rem, 5vw, 3.75rem);
	--thriveo-gutter: var(--wp--preset--spacing--50, 1.5rem);

	--thriveo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--thriveo-duration-fast: 120ms;
	--thriveo-duration-base: 200ms;
	--thriveo-duration-slow: 320ms;
	--thriveo-header-height: 4.5rem;

	--thriveo-color-cta: var(--brand-cyan);
	--thriveo-color-cta-hover: var(--brand-cyan-hover);
	--thriveo-color-cta-press: var(--brand-cyan-press);
	--thriveo-color-cta-text: var(--brand-navy-deep);
	--thriveo-color-brand-green: var(--brand-green);

	--thriveo-footer-bg: var(--brand-navy-ink);
	--thriveo-footer-text: var(--brand-white-soft);
	--thriveo-footer-muted: var(--brand-neutral-400);
	--thriveo-footer-accent: var(--brand-cyan);
	--thriveo-footer-hairline: rgba(255, 255, 255, 0.1);

	color-scheme: dark;
	--thriveo-color-bg: var(--brand-navy-deep);
	--thriveo-color-bg-alt: var(--brand-subtle-dark);
	--thriveo-color-surface: var(--brand-navy);
	--thriveo-color-surface-tint: rgba(18, 217, 227, 0.04);
	--thriveo-color-text: var(--brand-white-soft);
	--thriveo-color-text-secondary: var(--brand-neutral-300);
	--thriveo-color-muted: var(--brand-neutral-400);
	--thriveo-color-link: var(--brand-cyan);
	--thriveo-color-accent: var(--brand-cyan);
	--thriveo-color-accent-contrast: var(--brand-navy-deep);
	--thriveo-color-accent-line: rgba(18, 217, 227, 0.35);
	--thriveo-color-border: var(--brand-border-dark);
	--thriveo-color-hairline: rgba(255, 255, 255, 0.12);
	--thriveo-color-success: var(--brand-green);
	--thriveo-color-error: var(--brand-error-dark);
	--thriveo-color-warning: var(--brand-warning);
	--thriveo-color-focus: var(--brand-cyan);
	--thriveo-color-overlay: rgba(13, 19, 32, 0.72);
	--thriveo-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
	--thriveo-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.36);
	--thriveo-shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.44);
	--thriveo-dot-grid: radial-gradient(circle, rgba(18, 217, 227, 0.08) 1px, transparent 1px);
	--thriveo-glow-line: linear-gradient(90deg, transparent 0%, rgba(18, 217, 227, 0.3) 50%, transparent 100%);
}

:root[data-theme="light"] {
	color-scheme: light;
	--thriveo-color-bg: var(--brand-white-soft);
	--thriveo-color-bg-alt: var(--brand-neutral-100);
	--thriveo-color-surface: var(--brand-white);
	--thriveo-color-surface-tint: rgba(18, 217, 227, 0.06);
	--thriveo-color-text: var(--brand-navy);
	--thriveo-color-text-secondary: var(--brand-ocean);
	--thriveo-color-muted: var(--brand-neutral-600);
	--thriveo-color-link: var(--brand-teal-ink);
	--thriveo-color-accent: var(--brand-teal-ink);
	--thriveo-color-accent-contrast: var(--brand-white);
	--thriveo-color-accent-line: rgba(10, 108, 115, 0.35);
	--thriveo-color-border: var(--brand-neutral-500);
	--thriveo-color-hairline: rgba(34, 47, 76, 0.14);
	--thriveo-color-success: var(--brand-success-ink);
	--thriveo-color-error: var(--brand-error-ink);
	--thriveo-color-warning: var(--brand-warning-ink);
	--thriveo-color-focus: var(--brand-teal-ink);
	--thriveo-color-overlay: rgba(23, 31, 50, 0.55);
	--thriveo-shadow-sm: 0 2px 6px rgba(23, 31, 50, 0.06), 0 1px 2px rgba(23, 31, 50, 0.05);
	--thriveo-shadow-md: 0 6px 18px rgba(23, 31, 50, 0.08), 0 2px 4px rgba(23, 31, 50, 0.05);
	--thriveo-shadow-lg: 0 14px 32px rgba(23, 31, 50, 0.12), 0 3px 8px rgba(23, 31, 50, 0.06);
	--thriveo-dot-grid: radial-gradient(circle, rgba(34, 47, 76, 0.08) 1px, transparent 1px);
	--thriveo-glow-line: linear-gradient(90deg, transparent 0%, rgba(10, 108, 115, 0.3) 50%, transparent 100%);
	--thriveo-footer-bg: var(--brand-neutral-100);
	--thriveo-footer-text: var(--brand-navy);
	--thriveo-footer-muted: var(--brand-neutral-600);
	--thriveo-footer-accent: var(--brand-teal-ink);
	--thriveo-footer-hairline: rgba(34, 47, 76, 0.14);
}

:root {
	--thriveo-color-background: var(--thriveo-color-bg);
	--thriveo-color-on-accent: var(--thriveo-color-accent-contrast);
	--thriveo-color-accent-text: var(--thriveo-color-accent-contrast);
	--thriveo-color-danger: var(--thriveo-color-error);
	--thriveo-font-family: var(--thriveo-font-body);
	--thriveo-font-size: 1rem;
	--thriveo-spacing: var(--thriveo-space-6);
	--thriveo-spacing-small: var(--thriveo-space-2);
}