/*
 * Design tokens (WBS-0014), per 06-UX/02_Design_System_and_Theming.md SS2/SS6.
 * Exact values from the blueprint -- not invented here. Base ("Clinical
 * Luxe") tokens plus one CSS-custom-property override block per remaining
 * theme family. Themes are data (a token-override set), not separate
 * templates or forked component code, per SS6's explicit rule.
 */

:root {
	/* Base tokens (light) -- "Clinical Luxe" / multi-specialty base theme */
	--color-bg: #F7F9FA;
	--color-surface: #FFFFFF;
	--color-text: #1C2733;
	--color-text-muted: #5B6B7A;
	--color-border: #DDE4E9;
	/* REM-016: --brand-primary / --brand-secondary are the per-site brand
	   override hook. They are set (only when configured) by
	   templates/includes/brand_css_vars.html, which every shell includes
	   right after this file and which publishes Clinic Brand Settings'
	   resolved primary/secondary colour. When nothing is configured the
	   custom property is simply never defined and the literal below is used,
	   so an unbranded site renders exactly as it always has. This is the
	   whole of the colour-application change -- every component keeps
	   painting from --color-brand-primary / --color-brand-secondary as
	   before. */
	--color-brand-primary: var(--brand-primary, #0E6E5C);
	/* Text/icon-safe variant of color-brand-primary (DEC-IMPL-012 / GAP-IMPL-0001).
	   Equals color-brand-primary by default. Use this token -- never
	   color-brand-primary directly -- wherever the brand accent renders as
	   FOREGROUND text or an icon glyph on a light surface; keep using
	   color-brand-primary itself for backgrounds/buttons/borders (paired
	   with white text, which has no contrast problem). This split exists
	   because the Growing Years theme's specified accent fails the 3:1
	   large-text/icon floor as a foreground color but is fine as a button
	   background. */
	--color-brand-primary-on-light: var(--color-brand-primary);
	--color-brand-secondary: var(--brand-secondary, #2C4A63);
	--status-success: #1E8A5F;
	--status-warning: #B7791E;
	--status-danger: #B4232C;
	--status-info: #2B6CB0;
	--status-neutral: #5B6B7A;
	--focus-ring-color: #2C7FB0;
	--focus-ring-width: 2px;

	--type-scale-base: 15px;
	/* type-scale-ratio 1.2 (minor third): 12/13/15/18/22/26/32px */
	--type-scale-xs: 12px;
	--type-scale-sm: 13px;
	--type-scale-md: 15px;
	--type-scale-lg: 18px;
	--type-scale-xl: 22px;
	--type-scale-xxl: 26px;
	--type-scale-xxxl: 32px;

	--font-latin: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-arabic: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;

	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 24px;
	--spacing-6: 32px;
	--spacing-7: 48px;
	--spacing-8: 64px;

	--radius-card: 8px;
	--radius-modal: 12px;
	--radius-button: 6px;
	--radius-badge: 999px;

	--elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06);
	--elevation-2: 0 8px 24px rgba(0, 0, 0, 0.16);

	--motion-duration-micro: 150ms;
	--motion-duration-panel: 250ms;
	--motion-easing: cubic-bezier(0.2, 0, 0, 1);

	--layout-max-width: 1440px;
	--sidebar-width-expanded: 240px;
	--sidebar-width-collapsed: 64px;

	--training-banner-bg: #5B3A9E; /* distinct purple, never reused elsewhere */
}

:root[data-theme="dark"] {
	--color-bg: #0F1418;
	--color-surface: #1A2126;
	--color-text: #E8EDF1;
	--color-text-muted: #9AAAB8;
	--color-border: #2B3640;
}

/* Theme families (SS6) -- accent (color-brand-primary) override only;
   every other token is inherited unchanged from the base above.
   Each keeps the same --brand-* override hook as the base token (REM-016),
   so an explicit Clinic Brand Settings colour still wins over the specialty
   preset's accent instead of being silently discarded by it; with no clinic
   colour configured the preset's own literal applies exactly as before.
   (No template emits the data-specialty-theme attribute today, so these
   blocks are currently inert either way.) */
[data-specialty-theme="dental-precision"] { --color-brand-primary: var(--brand-primary, #1B5E8C); }
[data-specialty-theme="aesthetic-atelier"] { --color-brand-primary: var(--brand-primary, #9C6B4F); }
[data-specialty-theme="lab-intelligence"] { --color-brand-primary: var(--brand-primary, #2E7D6B); }
[data-specialty-theme="rehab-motion"] { --color-brand-primary: var(--brand-primary, #3E7CB1); }
[data-specialty-theme="vision-clarity"] { --color-brand-primary: var(--brand-primary, #3A6EA5); }
[data-specialty-theme="growing-years"] {
	--color-brand-primary: var(--brand-primary, #E08E45);
	/* #E08E45 as a foreground (text/icon) color is only 2.58:1 on white --
	   below the 3:1 floor (GUC SS2). Darkened, same-hue variant for
	   foreground use only; contrast validated at 3.82:1 on white. Button/
	   background use is unaffected (unchanged --color-brand-primary). */
	--color-brand-primary-on-light: #C26D20;
}
[data-specialty-theme="maternal-care"] { --color-brand-primary: var(--brand-primary, #B15C7E); }
[data-specialty-theme="primary-circle"] { --color-brand-primary: var(--brand-primary, #3D7A5C); }
/* clinical-luxe (base) and custom-blank use --color-brand-primary as already set */

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-latin);
	font-size: var(--type-scale-md);
}

[dir="rtl"] body,
body[lang="ar"] {
	font-family: var(--font-arabic);
}

:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}