/**
 * Design Tokens — Rheumatology Clinic
 *
 * The single source of truth for every visual value in the theme.
 *
 * Rules:
 *   - Components reference tokens. Never raw hex, px, or ms values.
 *   - Adding a token is a design-system decision, not a component decision.
 *   - Contrast ratios below are against --color-surface (#FFFFFF) unless noted.
 *
 * See docs/DESIGN_SYSTEM.md
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour — Primary (Medical Blue)
	 * Conveys clinical trust. Used for primary actions and links.
	 * --------------------------------------------------------------- */
	--color-primary-50:  #EFF6FC;
	--color-primary-100: #D8EAF7;
	--color-primary-200: #B0D4EF;
	--color-primary-300: #7BB6E2;
	--color-primary-400: #4592D0;
	--color-primary-500: #1E73B8;
	--color-primary-600: #0B5FA5;  /* 5.9:1 — default primary */
	--color-primary-700: #094B84;  /* 8.3:1 — text on white */
	--color-primary-800: #073A67;
	--color-primary-900: #052A4B;

	--color-primary: var(--color-primary-600);

	/* ---------------------------------------------------------------
	 * Colour — Secondary (Teal)
	 * Supporting accent. Never competes with primary for actions.
	 * --------------------------------------------------------------- */
	--color-secondary-50:  #ECF8F9;
	--color-secondary-100: #D2EFF1;
	--color-secondary-200: #A3DEE3;
	--color-secondary-300: #6BC5CD;
	--color-secondary-400: #37A5AF;
	--color-secondary-500: #158A95;
	--color-secondary-600: #0F7C86;  /* 4.8:1 */
	--color-secondary-700: #0C636B;  /* 6.7:1 */
	--color-secondary-800: #094A50;
	--color-secondary-900: #063437;

	--color-secondary: var(--color-secondary-600);

	/* ---------------------------------------------------------------
	 * Colour — Neutral
	 * --------------------------------------------------------------- */
	--color-neutral-0:   #FFFFFF;
	--color-neutral-50:  #F7F9FA;
	--color-neutral-100: #EDF1F3;
	--color-neutral-200: #DDE3E8;
	--color-neutral-300: #C2CBD3;
	--color-neutral-400: #94A2AE;
	--color-neutral-500: #697887;
	--color-neutral-600: #4E5C69;  /* 7.1:1 — secondary text */
	--color-neutral-700: #3A4753;
	--color-neutral-800: #1F2933;  /* 14.9:1 — body text */
	--color-neutral-900: #121A21;

	/* ---------------------------------------------------------------
	 * Colour — Semantic
	 * Never the sole carrier of meaning. Always pair with text or icon;
	 * colour-blind users and screen readers cannot see hue alone.
	 * --------------------------------------------------------------- */
	--color-success:     #1B7F4B;  /* 4.9:1 */
	--color-success-bg:  #E8F5EE;
	--color-warning:     #B45309;  /* 4.7:1 */
	--color-warning-bg:  #FDF3E7;
	--color-error:       #B42318;  /* 6.5:1 */
	--color-error-bg:    #FDECEA;
	--color-info:        var(--color-primary-700);
	--color-info-bg:     var(--color-primary-50);

	/* ---------------------------------------------------------------
	 * Colour — Applied roles
	 * Components use these, not the scales above.
	 * --------------------------------------------------------------- */
	--color-surface:          var(--color-neutral-0);
	--color-surface-sunken:   var(--color-neutral-50);
	--color-surface-raised:   var(--color-neutral-0);
	--color-text:             var(--color-neutral-800);
	--color-text-muted:       var(--color-neutral-600);
	--color-text-inverse:     var(--color-neutral-0);
	--color-border:           var(--color-neutral-200);
	--color-border-strong:    var(--color-neutral-300);
	--color-link:             var(--color-primary-700);
	--color-link-hover:       var(--color-primary-800);
	--color-focus-ring:       var(--color-primary-500);

	/* ---------------------------------------------------------------
	 * Typography — Families
	 *
	 * Poppins: display and headings only.
	 * Inter:   body, UI, and all long-form reading.
	 *
	 * Load only the weights listed below. Each additional weight is a
	 * separate download competing with the LCP target in ARCHITECTURE.md.
	 * Self-host with font-display: swap; do not use a third-party CDN.
	 *
	 * Poppins: 500, 600
	 * Inter:   400, 500, 600
	 * --------------------------------------------------------------- */
	--font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:    ui-monospace, 'Cascadia Code', 'Consolas', monospace;

	/* ---------------------------------------------------------------
	 * Typography — Scale
	 * Ratio ~1.25. Fluid sizes clamp between mobile and desktop so no
	 * breakpoint-specific overrides are needed.
	 * --------------------------------------------------------------- */
	--text-caption:   0.75rem;   /* 12px */
	--text-small:     0.875rem;  /* 14px */
	--text-body:      1rem;      /* 16px — never smaller for body copy */
	--text-body-lg:   1.125rem;  /* 18px — article body */
	--text-h4:        1.25rem;   /* 20px */
	--text-h3:        clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
	--text-h2:        clamp(1.625rem, 1.4rem + 1.0vw, 2rem);
	--text-h1:        clamp(2rem,     1.7rem + 1.6vw, 2.75rem);
	--text-display:   clamp(2.5rem,   2.0rem + 2.4vw, 3.5rem);

	/* Weights */
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;

	/* Line heights — tighter as type grows */
	--leading-tight:   1.2;   /* display, h1 */
	--leading-snug:    1.35;  /* h2, h3 */
	--leading-normal:  1.5;   /* UI text */
	--leading-relaxed: 1.7;   /* article body — aids sustained reading */

	/* Letter spacing */
	--tracking-tight:  -0.02em;  /* large display only */
	--tracking-normal: 0;
	--tracking-wide:   0.04em;   /* small caps, eyebrow labels */

	/* Measure — 65–75 characters is the readable range */
	--measure: 68ch;

	/* ---------------------------------------------------------------
	 * Spacing — strict 8-point system
	 * --space-1 (4px) is the only sub-8 step, for optical adjustment.
	 * Arbitrary values are prohibited. If a value is missing, that is a
	 * design-system conversation, not a local override.
	 * --------------------------------------------------------------- */
	--space-1:  0.25rem;  /*   4px */
	--space-2:  0.5rem;   /*   8px */
	--space-3:  1rem;     /*  16px */
	--space-4:  1.5rem;   /*  24px */
	--space-5:  2rem;     /*  32px */
	--space-6:  2.5rem;   /*  40px */
	--space-7:  3rem;     /*  48px */
	--space-8:  4rem;     /*  64px */
	--space-9:  5rem;     /*  80px */
	--space-10: 6rem;     /*  96px */
	--space-11: 8rem;     /* 128px */

	/* Section rhythm */
	--section-padding-y: clamp(var(--space-7), 5vw, var(--space-10));
	--container-max:     1200px;
	--container-narrow:  760px;  /* article column */
	--container-gutter:  var(--space-3);

	/* ---------------------------------------------------------------
	 * Border radius — one family, applied consistently
	 * --------------------------------------------------------------- */
	--radius-sm:   4px;
	--radius-md:   8px;   /* default: buttons, inputs */
	--radius-lg:   12px;  /* cards */
	--radius-xl:   16px;  /* modals, feature panels */
	--radius-full: 9999px;

	/* ---------------------------------------------------------------
	 * Shadows — subtle only. Elevation is communicated by hierarchy,
	 * not by heavy drop shadows.
	 * --------------------------------------------------------------- */
	--shadow-xs: 0 1px 2px rgba(18, 26, 33, 0.04);
	--shadow-sm: 0 1px 3px rgba(18, 26, 33, 0.06), 0 1px 2px rgba(18, 26, 33, 0.04);
	--shadow-md: 0 4px 8px rgba(18, 26, 33, 0.06), 0 2px 4px rgba(18, 26, 33, 0.04);
	--shadow-lg: 0 12px 24px rgba(18, 26, 33, 0.08), 0 4px 8px rgba(18, 26, 33, 0.04);

	/* ---------------------------------------------------------------
	 * Borders
	 * --------------------------------------------------------------- */
	--border-width: 1px;
	--border-width-thick: 2px;
	--border-default: var(--border-width) solid var(--color-border);

	/* ---------------------------------------------------------------
	 * Motion — minimal, purposeful, under 300ms
	 * --------------------------------------------------------------- */
	--duration-fast:   120ms;
	--duration-base:   200ms;
	--duration-slow:   280ms;  /* ceiling — see DESIGN_SYSTEM.md */
	--ease-standard:   cubic-bezier(0.2, 0, 0.2, 1);
	--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
	--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

	/* ---------------------------------------------------------------
	 * Focus — visible, never removed
	 * --------------------------------------------------------------- */
	--focus-ring-width:  3px;
	--focus-ring-offset: 2px;
	--focus-ring: var(--focus-ring-width) solid var(--color-focus-ring);

	/* ---------------------------------------------------------------
	 * Layering
	 * --------------------------------------------------------------- */
	--z-base:      0;
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-modal:     400;
	--z-toast:     500;

	/* ---------------------------------------------------------------
	 * Touch targets — 44px minimum per WCAG 2.5.5
	 * --------------------------------------------------------------- */
	--target-min: 44px;
}

/**
 * Honour reduced-motion preferences.
 * Vestibular disorders are meaningfully represented among patients with
 * autoimmune and inflammatory conditions, which is this site's audience.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}