/**
 * PersiaCopy Design Tokens
 *
 * Single source of truth for colors, typography, spacing, and motion.
 * Override primary/secondary via admin settings (inline CSS in wp_head).
 *
 * @package PersiaCopy
 */

:root {
	/* ── Brand colors ── */
	--color-primary: #0f4c81;
	--color-primary-rgb: 15 76 129;
	--color-primary-hover: #0c3d68;
	--color-primary-soft: rgb(var(--color-primary-rgb) / 10%);

	--color-secondary: #64748b;
	--color-secondary-rgb: 100 116 139;
	--color-secondary-hover: #475569;

	--color-success: #059669;
	--color-success-rgb: 5 150 105;
	--color-success-hover: #047857;

	--color-warning: #d97706;
	--color-warning-rgb: 217 119 6;
	--color-warning-hover: #b45309;

	--color-danger: #dc2626;
	--color-danger-rgb: 220 38 38;
	--color-danger-hover: #b91c1c;

	/* ── Surfaces & text ── */
	--color-bg: #f4f6f9;
	--color-bg-alt: #eef1f6;
	--color-surface: #ffffff;
	--color-surface-raised: #ffffff;
	--color-surface-glass: rgb(255 255 255 / 72%);
	--color-border: #e2e8f0;
	--color-border-strong: #cbd5e1;

	--color-text: #0f172a;
	--color-text-secondary: #334155;
	--color-muted: #64748b;
	--color-muted-light: #94a3b8;
	--color-inverse: #ffffff;

	/* ── Interactive ── */
	--color-hover-bg: rgb(var(--color-primary-rgb) / 6%);
	--color-focus-ring: rgb(var(--color-primary-rgb) / 35%);
	--color-link: var(--color-primary);
	--color-link-hover: var(--color-primary-hover);

	/* ── Typography ── */
	--font-body: "Vazirmatn", system-ui, -apple-system, sans-serif;
	--font-display: var(--font-body);

	--text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	--text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
	--text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	--text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
	--text-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.25rem);
	--text-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem);
	--text-3xl: clamp(1.625rem, 1.45rem + 0.9vw, 1.875rem);
	--text-4xl: clamp(2rem, 1.75rem + 1.2vw, 2.5rem);
	--text-5xl: clamp(2.375rem, 2rem + 1.8vw, 3.25rem);

	--leading-tight: 1.25;
	--leading-snug: 1.4;
	--leading-normal: 1.7;
	--leading-relaxed: 1.85;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;

	/* ── Spacing (4px base) ── */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ── Radius ── */
	--radius-sm: 0.375rem;
	--radius-md: 0.625rem;
	--radius-lg: 0.875rem;
	--radius-xl: 1.25rem;
	--radius-2xl: 1.5rem;
	--radius-full: 9999px;

	/* ── Shadows ── */
	--shadow-xs: 0 1px 2px rgb(15 23 42 / 5%);
	--shadow-sm: 0 1px 3px rgb(15 23 42 / 8%), 0 1px 2px rgb(15 23 42 / 4%);
	--shadow-md: 0 4px 12px rgb(15 23 42 / 8%), 0 2px 4px rgb(15 23 42 / 4%);
	--shadow-lg: 0 12px 32px rgb(15 23 42 / 10%), 0 4px 8px rgb(15 23 42 / 4%);
	--shadow-xl: 0 24px 48px rgb(15 23 42 / 12%);
	--shadow-inner: inset 0 2px 4px rgb(15 23 42 / 6%);
	--shadow-focus: 0 0 0 3px var(--color-focus-ring);

	/* ── Motion ── */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 400ms;

	/* ── Layout ── */
	--container-max: 75rem;
	--container-narrow: 48rem;
	--header-height: 4.5rem;
	--header-height-shrink: 3.75rem;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;

	/* ── Bootstrap 5.3 variable bridge ── */
	--bs-body-font-family: var(--font-body);
	--bs-body-color: var(--color-text);
	--bs-body-bg: var(--color-bg);
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: var(--color-primary-rgb);
	--bs-secondary: var(--color-secondary);
	--bs-secondary-rgb: var(--color-secondary-rgb);
	--bs-success: var(--color-success);
	--bs-success-rgb: var(--color-success-rgb);
	--bs-warning: var(--color-warning);
	--bs-warning-rgb: var(--color-warning-rgb);
	--bs-danger: var(--color-danger);
	--bs-danger-rgb: var(--color-danger-rgb);
	--bs-border-color: var(--color-border);
	--bs-border-radius: var(--radius-md);
	--bs-border-radius-sm: var(--radius-sm);
	--bs-border-radius-lg: var(--radius-lg);
	--bs-link-color: var(--color-link);
	--bs-link-hover-color: var(--color-link-hover);
	--bs-focus-ring-color: var(--color-focus-ring);
}

/* Dark mode preparation — activated via data-theme="dark" on <html> */
[data-theme="dark"] {
	--color-primary: #3b82f6;
	--color-primary-rgb: 59 130 246;
	--color-primary-hover: #60a5fa;
	--color-primary-soft: rgb(var(--color-primary-rgb) / 15%);

	--color-secondary: #94a3b8;
	--color-secondary-rgb: 148 163 184;
	--color-secondary-hover: #cbd5e1;

	--color-bg: #0b1120;
	--color-bg-alt: #0f172a;
	--color-surface: #111827;
	--color-surface-raised: #1e293b;
	--color-surface-glass: rgb(17 24 39 / 75%);
	--color-border: #1e293b;
	--color-border-strong: #334155;

	--color-text: #f1f5f9;
	--color-text-secondary: #cbd5e1;
	--color-muted: #94a3b8;
	--color-muted-light: #64748b;

	--color-hover-bg: rgb(var(--color-primary-rgb) / 12%);
	--color-focus-ring: rgb(var(--color-primary-rgb) / 40%);

	--shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
	--shadow-sm: 0 1px 3px rgb(0 0 0 / 35%);
	--shadow-md: 0 4px 12px rgb(0 0 0 / 40%);
	--shadow-lg: 0 12px 32px rgb(0 0 0 / 45%);
	--shadow-xl: 0 24px 48px rgb(0 0 0 / 50%);

	--bs-body-color: var(--color-text);
	--bs-body-bg: var(--color-bg);
	--bs-border-color: var(--color-border);
}