/**
 * SecureLogic TechPress Pro — Design Tokens
 * Single source of truth for the visual language. Every component in
 * main.css consumes these variables — nothing is ever hardcoded downstream.
 * Customizer color/typography controls overwrite a subset of these at
 * runtime via inline <style> (see inc/class-customizer.php::output_css()).
 */

:root {
	/* ---- Brand Colors ---- */
	--slt-color-primary: #0B1F3A;      /* Corporate Navy */
	--slt-color-secondary: #0057B8;    /* Corporate Blue */
	--slt-color-accent: #00B8D9;       /* Accent Cyan */
	--slt-color-white: #FFFFFF;
	--slt-color-bg: #F4F7FA;
	--slt-color-text: #333333;
	--slt-color-text-muted: #6B7280;
	--slt-color-border: #E2E8F0;
	--slt-color-success: #16A34A;
	--slt-color-warning: #F59E0B;
	--slt-color-danger: #DC2626;

	/* ---- Dark Mode (toggled via [data-theme="dark"] on <html>) ---- */
	--slt-color-bg-dark: #0B1220;
	--slt-color-text-dark: #E5E7EB;
	--slt-color-border-dark: #1F2937;

	/* ---- Typography ---- */
	--slt-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--slt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--slt-fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--slt-fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
	--slt-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--slt-fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	--slt-fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
	--slt-fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
	--slt-fs-3xl: clamp(2.25rem, 1.9rem + 1.8vw, 3rem);
	--slt-fs-4xl: clamp(2.75rem, 2.2rem + 2.8vw, 4rem);

	--slt-lh-tight: 1.15;
	--slt-lh-normal: 1.5;
	--slt-lh-loose: 1.8;

	--slt-fw-regular: 400;
	--slt-fw-medium: 500;
	--slt-fw-semibold: 600;
	--slt-fw-bold: 700;

	/* ---- Spacing Scale (4px base) ---- */
	--slt-space-1: 0.25rem;
	--slt-space-2: 0.5rem;
	--slt-space-3: 0.75rem;
	--slt-space-4: 1rem;
	--slt-space-5: 1.5rem;
	--slt-space-6: 2rem;
	--slt-space-8: 3rem;
	--slt-space-10: 4rem;
	--slt-space-12: 6rem;
	--slt-space-16: 8rem;

	/* ---- Layout ---- */
	--slt-container: 1280px;
	--slt-container-narrow: 860px;
	--slt-container-wide: 1440px;
	--slt-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--slt-grid-gap: 1.5rem;

	/* ---- Breakpoints (reference only, used in main.css media queries) ---- */
	--slt-bp-sm: 480px;
	--slt-bp-md: 768px;
	--slt-bp-lg: 1024px;
	--slt-bp-xl: 1280px;

	/* ---- Radius ---- */
	--slt-radius-sm: 4px;
	--slt-radius-md: 8px;
	--slt-radius-lg: 16px;
	--slt-radius-pill: 999px;

	/* ---- Shadows ---- */
	--slt-shadow-sm: 0 1px 2px rgba(11,31,58,0.06);
	--slt-shadow-md: 0 4px 12px rgba(11,31,58,0.08);
	--slt-shadow-lg: 0 12px 32px rgba(11,31,58,0.12);
	--slt-shadow-focus: 0 0 0 3px rgba(0,184,217,0.45);

	/* ---- Icon Sizes ---- */
	--slt-icon-sm: 16px;
	--slt-icon-md: 24px;
	--slt-icon-lg: 40px;
	--slt-icon-xl: 64px;

	/* ---- Transitions ---- */
	--slt-transition-fast: 150ms ease;
	--slt-transition-base: 250ms ease;
	--slt-transition-slow: 400ms cubic-bezier(.4,0,.2,1);

	/* ---- Buttons ---- */
	--slt-btn-padding-y: 0.875rem;
	--slt-btn-padding-x: 1.75rem;
	--slt-btn-radius: var(--slt-radius-md);

	/* ---- Forms ---- */
	--slt-input-height: 3rem;
	--slt-input-radius: var(--slt-radius-md);
	--slt-input-border: var(--slt-color-border);

	/* ---- Z-index scale ---- */
	--slt-z-header: 100;
	--slt-z-dropdown: 200;
	--slt-z-modal: 500;
	--slt-z-toast: 900;
}

[data-theme="dark"] {
	--slt-color-bg: var(--slt-color-bg-dark);
	--slt-color-text: var(--slt-color-text-dark);
	--slt-color-border: var(--slt-color-border-dark);
	--slt-color-white: #111827;
}
