/**
 * SIA — Design tokens (single source of truth).
 *
 * Load first in every NH context (doctor admin, reception, portal, booking, account).
 * §2 semantic values match sia-admin-2030 baseline — pixel-neutral for doctor admin.
 *
 * White-label: clinic overrides inject --sia-brand-* on patient-facing roots via
 * SIA_Clinic_Brand::css_brand_vars(). Changing clinic brand color in Settings requires
 * a page-cache flush on public contexts (portal, booking, public questionnaires) so
 * inline brand CSS vars are regenerated.
 *
 * @see docs/audit/UX-CONSISTENCY.md §10
 */

/* ==========================================================================
   §2 — SEMANTIC TOKENS (authoritative — match sia-admin-2030 :root exactly)
   ========================================================================== */

:root {
	/* Brand / accent */
	--sia-primary: #18509c; /* Primary actions, links, shell gradient start */
	--sia-primary-dark: #123d75; /* Hover, gradient end, emphasis */
	--sia-primary-light: #e8eef6; /* Subtle primary-tinted backgrounds */
	--sia-primary-contrast: #ffffff; /* Text/icons on --sia-primary surfaces */
	--sia-primary-soft: var(--sia-primary-light); /* alias used by legacy CSS */
	--sia-muted: var(--sia-text-muted); /* alias used by admin-2030 */
	--sia-secondary: #c9a13a; /* Accent highlights, secondary CTAs */

	/* Surface / layout */
	--sia-bg: #f8fafc; /* App canvas (doctor admin #wpcontent) */
	--sia-bg-subtle: #f1f5f9; /* Inset panels, table stripes */
	--sia-surface: #ffffff; /* Cards, panels, inputs */
	--sia-surface-raised: #ffffff; /* Modals, dropdowns */
	--sia-overlay: rgba(26, 43, 75, 0.45); /* Modal backdrop */

	/* Text */
	--sia-text: #1a2b4b; /* Body copy, headings */
	--sia-text-muted: #64748b; /* Secondary labels, meta */
	--sia-text-subtle: #94a3b8; /* Placeholders, hints */
	--sia-text-inverse: #ffffff; /* Text on dark/primary surfaces */

	/* Borders */
	--sia-border: #e2e8f0; /* Default dividers, input borders */
	--sia-border-strong: #cbd5e1; /* Emphasized separators */
	--sia-border-focus: #18509c; /* Focus ring color (= primary) */

	/* Semantic feedback */
	--sia-success: #2bb673;
	--sia-success-bg: #e8f8f0;
	--sia-success-border: #a7e3c4;
	--sia-warning: #f6a623;
	--sia-warning-bg: #fef6e8;
	--sia-warning-border: #f9d49a;
	--sia-danger: #e74c3c;
	--sia-danger-bg: #fdecea;
	--sia-danger-border: #f5b7b1;
	--sia-info: #18509c;
	--sia-info-bg: #e8eef6;
	--sia-info-border: #b8cce8;
}

/* ==========================================================================
   §3 — STATUS SEMANTICS (unified badge/chip palette — sia-badge in 2.0.2)
   ========================================================================== */

:root {
	--sia-status-neutral-fg: #64748b;
	--sia-status-neutral-bg: #f1f5f9;
	--sia-status-neutral-border: #e2e8f0;

	--sia-status-info-fg: var(--sia-info);
	--sia-status-info-bg: var(--sia-info-bg);
	--sia-status-info-border: var(--sia-info-border);

	--sia-status-success-fg: var(--sia-success);
	--sia-status-success-bg: var(--sia-success-bg);
	--sia-status-success-border: var(--sia-success-border);

	--sia-status-warning-fg: var(--sia-warning);
	--sia-status-warning-bg: var(--sia-warning-bg);
	--sia-status-warning-border: var(--sia-warning-border);

	--sia-status-danger-fg: var(--sia-danger);
	--sia-status-danger-bg: var(--sia-danger-bg);
	--sia-status-danger-border: var(--sia-danger-border);

	--sia-status-progress-fg: #0d9488;
	--sia-status-progress-bg: #ccfbf1;
	--sia-status-progress-border: #99f6e4;
}

/* ==========================================================================
   §1 — RAW PALETTE (derived around §2 anchors — never overrides semantics)
   Primary-600 = --sia-primary (#18509c), Primary-700 = --sia-primary-dark (#123d75)
   ========================================================================== */

:root {
	--sia-color-primary-50: #eef3fa;
	--sia-color-primary-100: #e8eef6; /* = --sia-primary-light */
	--sia-color-primary-200: #b8cce8;
	--sia-color-primary-300: #6b94c4;
	--sia-color-primary-400: #3a6fad;
	--sia-color-primary-500: #2462a5;
	--sia-color-primary-600: #18509c; /* anchor: --sia-primary */
	--sia-color-primary-700: #123d75; /* anchor: --sia-primary-dark */
	--sia-color-primary-800: #0e2f5a;
	--sia-color-primary-900: #0a2242;
	--sia-color-primary-950: #061528;

	--sia-color-neutral-50: #f8fafc; /* anchor: --sia-bg */
	--sia-color-neutral-100: #f1f5f9;
	--sia-color-neutral-200: #e2e8f0; /* anchor: --sia-border */
	--sia-color-neutral-300: #cbd5e1;
	--sia-color-neutral-400: #94a3b8;
	--sia-color-neutral-500: #64748b; /* anchor: --sia-text-muted */
	--sia-color-neutral-600: #475569;
	--sia-color-neutral-700: #334155;
	--sia-color-neutral-800: #1e293b;
	--sia-color-neutral-900: #1a2b4b; /* anchor: --sia-text */
	--sia-color-neutral-950: #0f172a;

	--sia-color-success-500: #2bb673; /* anchor: --sia-success */
	--sia-color-warning-500: #f6a623; /* anchor: --sia-warning */
	--sia-color-danger-500: #e74c3c; /* anchor: --sia-danger */
	--sia-color-info-500: #18509c; /* anchor: --sia-info */
}

/* ==========================================================================
   §4 — TYPOGRAPHY
   ========================================================================== */

:root {
	--sia-font-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
	--sia-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--sia-font: var(--sia-font-sans); /* legacy alias — sia-admin-2030 */

	--sia-font-size-xs: 0.75rem; /* 12px — captions, badges */
	--sia-font-size-sm: 0.8125rem; /* 13px — compact UI */
	--sia-font-size-base: 0.875rem; /* 14px — default body in admin */
	--sia-font-size-md: 1rem; /* 16px */
	--sia-font-size-lg: 1.125rem; /* 18px */
	--sia-font-size-xl: 1.25rem; /* 20px */
	--sia-font-size-2xl: 1.5rem; /* 24px */

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

	--sia-line-height-tight: 1.25;
	--sia-line-height-normal: 1.5;
	--sia-line-height-relaxed: 1.65;

	--sia-letter-spacing-tight: -0.01em;
	--sia-letter-spacing-normal: 0;
}

/* ==========================================================================
   §5 — SPACING
   ========================================================================== */

:root {
	--sia-space-0: 0;
	--sia-space-1: 2px;
	--sia-space-2: 4px;
	--sia-space-3: 6px;
	--sia-space-4: 8px;
	--sia-space-5: 12px;
	--sia-space-6: 16px;
	--sia-space-7: 20px;
	--sia-space-8: 24px;
	--sia-space-9: 32px;
	--sia-space-10: 40px;
	--sia-space-11: 48px;
	--sia-space-12: 64px;
}

/* ==========================================================================
   §6 — RADII
   ========================================================================== */

:root {
	--sia-radius-xs: 6px;
	--sia-radius-sm: 10px;
	--sia-radius: 14px; /* default cards */
	--sia-radius-lg: 16px;
	--sia-radius-xl: 20px;
	--sia-radius-full: 9999px;
}

/* ==========================================================================
   §7 — SHADOWS
   ========================================================================== */

:root {
	--sia-shadow-xs: 0 1px 2px rgba(26, 43, 75, 0.04);
	--sia-shadow-sm: 0 2px 8px rgba(26, 43, 75, 0.05);
	--sia-shadow: 0 4px 24px rgba(26, 43, 75, 0.06); /* legacy — sia-admin-2030 */
	--sia-shadow-md: var(--sia-shadow);
	--sia-shadow-lg: 0 8px 32px rgba(26, 43, 75, 0.08);
	--sia-shadow-xl: 0 12px 48px rgba(26, 43, 75, 0.1);
	--sia-shadow-focus: 0 0 0 3px rgba(24, 80, 156, 0.25);
}

/* ==========================================================================
   §8 — Z-INDEX
   ========================================================================== */

:root {
	--sia-z-base: 1;
	--sia-z-dropdown: 100;
	--sia-z-sticky: 200;
	--sia-z-modal: 10000;
	--sia-z-toast: 100100;
	--sia-z-tooltip: 100200;
	--sia-z-max: 2147483647;
}

/* ==========================================================================
   §9 — TRANSITIONS
   ========================================================================== */

:root {
	--sia-duration-fast: 120ms;
	--sia-duration-normal: 180ms;
	--sia-duration-slow: 280ms;
	--sia-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--sia-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--sia-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--sia-transition-color: color var(--sia-duration-normal) var(--sia-ease-default),
		background-color var(--sia-duration-normal) var(--sia-ease-default),
		border-color var(--sia-duration-normal) var(--sia-ease-default);
	--sia-transition-transform: transform var(--sia-duration-normal) var(--sia-ease-default);
	--sia-transition-opacity: opacity var(--sia-duration-normal) var(--sia-ease-default);
}

/* ==========================================================================
   §10 — COMPONENT PRIMITIVES (sizing — not full components)
   ========================================================================== */

:root {
	--sia-btn-height: 36px;
	--sia-btn-height-sm: 30px;
	--sia-btn-height-lg: 42px;
	--sia-input-height: 36px;
	--sia-content-max-width: 1280px; /* doctor .sia-app */
	--sia-content-max-width-narrow: 560px; /* booking widget */
}

/* ==========================================================================
   §11 — WHITE-LABEL BRAND ALIASES (defaults = doctor product palette)
   Clinic override: SIA_Clinic_Brand::css_brand_vars() on patient-facing roots.
   ========================================================================== */

:root {
	--sia-brand-primary: var(--sia-primary);
	--sia-brand-primary-dark: var(--sia-primary-dark);
	--sia-brand-primary-light: var(--sia-primary-light);
	--sia-brand-primary-contrast: var(--sia-primary-contrast);
	--sia-brand-accent: var(--sia-secondary);
	--sia-brand-color: var(--sia-brand-primary); /* legacy portal alias */
}

/* ==========================================================================
   §13 — DARK MODE (future — remap §2 semantics only; not active in 2.0)
   ========================================================================== */

/*
:root[data-sia-theme="dark"] {
	--sia-bg: #0f172a;
	--sia-bg-subtle: #1e293b;
	--sia-surface: #1e293b;
	--sia-surface-raised: #334155;
	--sia-text: #f1f5f9;
	--sia-text-muted: #94a3b8;
	--sia-text-subtle: #64748b;
	--sia-border: #334155;
	--sia-border-strong: #475569;
}
*/

/* ==========================================================================
   §14 — STATUS BADGES (unified — doctor + reception + portal)
   Mapping: scheduled→info · pending_*→warning · confirmed|completed→success
   arrived|in_progress→progress · cancelled|no_show→danger · else→neutral
   ========================================================================== */

.sia-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.4;
	border: 1px solid transparent;
	white-space: nowrap;
	vertical-align: middle;
}

.sia-badge--neutral {
	color: var(--sia-status-neutral-fg);
	background: var(--sia-status-neutral-bg);
	border-color: var(--sia-status-neutral-border);
}

.sia-badge--info {
	color: var(--sia-status-info-fg);
	background: var(--sia-status-info-bg);
	border-color: var(--sia-status-info-border);
}

.sia-badge--success {
	color: var(--sia-status-success-fg);
	background: var(--sia-status-success-bg);
	border-color: var(--sia-status-success-border);
}

.sia-badge--warning {
	color: var(--sia-status-warning-fg);
	background: var(--sia-status-warning-bg);
	border-color: var(--sia-status-warning-border);
}

.sia-badge--danger {
	color: var(--sia-status-danger-fg);
	background: var(--sia-status-danger-bg);
	border-color: var(--sia-status-danger-border);
}

.sia-badge--progress {
	color: var(--sia-status-progress-fg);
	background: var(--sia-status-progress-bg);
	border-color: var(--sia-status-progress-border);
}