/**
 * IQ Mobile — Material Design 3 token sheet (brand-mapped).
 * Source palette: IQ pink #e7008b (hover #b3006e, deep #850353), dark grey #27282c,
 * warm grey #6f6f6f, light greys #e6e6e6/#f6f6f6, success green #3bb54a, footer #111.
 * Brand face: Aller (regular/700, served locally by the theme).
 * Principles, not framework: color roles, 4dp spacing grid, type scale on the brand
 * font, shape tokens, elevation 0–3, state layers, standard motion easing.
 */
:root {
	/* ---- color roles ---- */
	--md-sys-color-primary: #e7008b;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-hover: #b3006e;
	--md-sys-color-primary-deep: #850353;
	--md-sys-color-primary-container: #ffd9ec;
	--md-sys-color-on-primary-container: #3b0023;

	--md-sys-color-secondary: #27282c;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #f1f1f3;
	--md-sys-color-on-secondary-container: #27282c;

	--md-sys-color-tertiary: #3bb54a;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #d9f4dd;
	--md-sys-color-on-tertiary-container: #0b3d14;

	--md-sys-color-surface: #ffffff;
	--md-sys-color-surface-dim: #f6f6f6;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #fafafa;
	--md-sys-color-surface-container: #f6f6f6;
	--md-sys-color-surface-container-high: #efefef;
	--md-sys-color-surface-container-highest: #e6e6e6;
	--md-sys-color-on-surface: #27282c;
	--md-sys-color-on-surface-variant: #6f6f6f;

	--md-sys-color-outline: #b9b9b9;
	--md-sys-color-outline-variant: #e6e6e6;

	--md-sys-color-error: #ba1a1a;
	--md-sys-color-on-error: #ffffff;

	--md-sys-color-inverse-surface: #111114;
	--md-sys-color-inverse-on-surface: #f2f0f0;

	/* ---- state layers (opacity) ---- */
	--md-sys-state-hover: 0.08;
	--md-sys-state-focus: 0.12;
	--md-sys-state-pressed: 0.12;

	/* ---- elevation (levels 0–3) ---- */
	--md-sys-elevation-0: none;
	--md-sys-elevation-1: 0 1px 2px rgba(17, 17, 20, 0.10), 0 1px 3px 1px rgba(17, 17, 20, 0.06);
	--md-sys-elevation-2: 0 1px 2px rgba(17, 17, 20, 0.10), 0 2px 6px 2px rgba(17, 17, 20, 0.08);
	--md-sys-elevation-3: 0 1px 3px rgba(17, 17, 20, 0.12), 0 4px 12px 4px rgba(17, 17, 20, 0.10);

	/* ---- shape ---- */
	--md-sys-shape-corner-xs: 4px;
	--md-sys-shape-corner-sm: 8px;
	--md-sys-shape-corner-md: 12px;
	--md-sys-shape-corner-lg: 16px;
	--md-sys-shape-corner-xl: 28px;
	--md-sys-shape-corner-full: 999px;

	/* ---- spacing, 4dp grid ---- */
	--iqm-space-1: 4px;
	--iqm-space-2: 8px;
	--iqm-space-3: 12px;
	--iqm-space-4: 16px;
	--iqm-space-5: 20px;
	--iqm-space-6: 24px;
	--iqm-space-8: 32px;
	--iqm-space-10: 40px;
	--iqm-space-12: 48px;
	--iqm-space-16: 64px;

	/* ---- type scale on the brand font (Aller; system fallbacks) ---- */
	--iqm-font: aller, "Helvetica Neue", Arial, sans-serif;
	--md-sys-typescale-display: 700 clamp(2.25rem, 4.5vw, 3.25rem) / 1.12 var(--iqm-font);
	--md-sys-typescale-headline-lg: 700 clamp(1.75rem, 3vw, 2.25rem) / 1.18 var(--iqm-font);
	--md-sys-typescale-headline: 700 clamp(1.4rem, 2.4vw, 1.75rem) / 1.22 var(--iqm-font);
	--md-sys-typescale-title-lg: 700 1.375rem / 1.27 var(--iqm-font);
	--md-sys-typescale-title: 600 1rem / 1.5 var(--iqm-font);
	--md-sys-typescale-body-lg: 400 1rem / 1.55 var(--iqm-font);
	--md-sys-typescale-body: 400 0.875rem / 1.5 var(--iqm-font);
	--md-sys-typescale-label-lg: 700 0.875rem / 1.45 var(--iqm-font);
	--md-sys-typescale-label: 700 0.75rem / 1.35 var(--iqm-font);

	/* ---- motion ---- */
	--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--md-sys-motion-duration-short: 200ms;
	--md-sys-motion-duration-medium: 300ms;

	/* ---- layout ---- */
	--iqm-container: 1190px;
	--iqm-touch-target: 44px;
}