/**
 * SMH Theme — design tokens.
 *
 * Color scheme mirrors the SMH frontend apps (patients-app / step-form-app):
 * teal primary #07889b, slate secondary #2c3e50, Cera Pro / Muli type.
 * Light and dark values are CSS custom properties; components never use
 * hard-coded colors (SPEC §22, §32).
 */

:root {
	color-scheme: light;

	/* Brand */
	--color-primary: #07889b;
	--color-primary-hover: #067687;
	--color-primary-active: #05566a;
	--color-primary-rgb: 7, 136, 155;
	--color-secondary: #2c3e50;
	--color-secondary-rgb: 44, 62, 80;
	--color-danger: #e74c3c;
	--color-danger-rgb: 231, 76, 60;

	/* Surfaces */
	--color-bg: #fafafa;
	--color-bg-alt: #ecf0f1;
	--color-surface: #ffffff;
	--color-surface-glass: rgba(255, 255, 255, 0.58);
	--color-surface-glass-strong: rgba(255, 255, 255, 0.74);
	--color-hover-bg: rgba(7, 136, 155, 0.08);

	/* Text */
	--color-text: #000000de;
	--color-text-secondary: rgba(0, 0, 0, 0.64);
	--color-text-inverse: #fdfdfd;

	/* Lines & focus */
	--color-border: rgba(44, 62, 80, 0.16);
	--color-border-strong: rgba(44, 62, 80, 0.26);
	--color-divider: rgba(44, 62, 80, 0.08);
	--color-focus-ring: rgba(7, 136, 155, 0.4);

	/* Shadows */
	--shadow-soft: 0 18px 40px rgba(7, 136, 155, 0.12);
	--shadow-card: 0 8px 18px rgba(7, 136, 155, 0.06);
	--shadow-modal: 0 24px 60px rgba(12, 26, 32, 0.28);

	/* Typography */
	--font-family: 'Cera Pro', 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-family-rtl: 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', 'Cera Pro', 'Muli', sans-serif;
	--fs-xs: 0.78rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2.25rem;
	--fs-hero: clamp(2rem, 5vw, 3.25rem);
	--line-height-tight: 1.25;
	--line-height-base: 1.65;

	/* Spacing */
	--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;

	/* Radii */
	--radius-sm: 0.375rem;
	--radius-md: 0.625rem;
	--radius-lg: 1rem;
	--radius-xl: 1.25rem;
	--radius-pill: 999px;

	/* Motion */
	--transition-fast: 120ms ease;
	--transition-base: 180ms ease;

	/* Layout */
	--container-max: 1180px;
	--container-prose: 760px;
	--header-height: 68px;
	--hero-height: 148px;

	/* Breakpoints (reference only — media queries still use raw px) */
	--bp-sm: 576px;
	--bp-md: 768px;
	--bp-lg: 992px;
	--bp-xl: 1200px;
}

[data-theme='dark'] {
	color-scheme: dark;

	--color-primary: #40c3d9;
	--color-primary-hover: #2fb0c6;
	--color-primary-active: #2396aa;
	--color-primary-rgb: 64, 195, 217;
	--color-secondary: #94a7bc;
	--color-secondary-rgb: 148, 167, 188;
	--color-danger: #f07a6b;
	--color-danger-rgb: 240, 122, 107;

	--color-bg: #0b1417;
	--color-bg-alt: #111d22;
	--color-surface: #142329;
	--color-surface-glass: rgba(20, 35, 41, 0.56);
	--color-surface-glass-strong: rgba(20, 35, 41, 0.72);
	--color-hover-bg: rgba(64, 195, 217, 0.16);

	--color-text: rgba(255, 255, 255, 0.92);
	--color-text-secondary: rgba(255, 255, 255, 0.68);
	--color-text-inverse: #041015;

	--color-border: rgba(64, 195, 217, 0.22);
	--color-border-strong: rgba(64, 195, 217, 0.32);
	--color-divider: rgba(64, 195, 217, 0.12);
	--color-focus-ring: rgba(64, 195, 217, 0.45);

	--shadow-soft: 0 24px 44px rgba(3, 18, 23, 0.55);
	--shadow-card: 0 10px 22px rgba(2, 10, 14, 0.36);
	--shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55);
}