/* ============================================================================
   NIMR DESIGN SYSTEM  —  Phase 0 foundation
   National Institute for Medical Research
   ----------------------------------------------------------------------------
   Brand-true, accessible design tokens derived from the NIMR seal:
     • cyan waves  -> signature blue scale (#43CBEF is the brand-defined tone)
     • snail motif -> rust / earth accent
     • cream ground + black linework -> warm neutral scale
   This file defines TOKENS + a few universally-safe enhancements only.
   It deliberately does NOT restyle Elementor layouts — the bold redesign is
   applied on bespoke templates that consume these tokens.
   ========================================================================== */

:root {
	/* --- Brand cyan (single hue family; #00aeed is the NIMR brand colour) ----- */
	--nimr-100: #e6f7fe;
	--nimr-200: #bfeafc;
	--nimr-300: #7ed7f7;
	--nimr-400: #38c6f2;
	--nimr-500: #00aeed; /* NIMR brand colour (fills, accents, decoration)      */
	--nimr-600: #0092c9; /* large text / button hover (>=3:1 on white)          */
	--nimr-700: #00719f; /* accessible text/link on white (AA normal)           */
	--nimr-800: #005678;
	--nimr-900: #003347; /* deepest cyan — used sparingly, never navy           */

	/* --- Earth / rust accent (snail motif) --- */
	--nimr-rust-400: #c56b3e;
	--nimr-rust-500: #9a4b22;
	--nimr-rust-600: #7a3b1a;
	--nimr-gold:     #c9862b; /* warm highlight, use sparingly                   */

	/* --- Neutrals (warm, from the cream ground) --- */
	--nimr-white: #ffffff;
	--nimr-cloud: #f4f8fa;
	--nimr-cream: #f7f4ec;
	--nimr-line:  #e2e8ec;
	--nimr-muted: #6b7a84;
	--nimr-slate: #46555f;
	--nimr-ink:   #10171c;

	/* --- Feedback --- */
	--nimr-success: #1f8a4c;
	--nimr-warning: #c9862b;
	--nimr-danger:  #c0392b;

	/* --- Semantic aliases (use these in templates, not raw scale) --- */
	--color-brand:        var(--nimr-500);
	--color-brand-strong: var(--nimr-700);
	--color-brand-deep:   var(--nimr-900);
	--color-accent:       var(--nimr-gold);
	--color-accent-earth: var(--nimr-rust-500);

	--color-heading: var(--nimr-ink);
	--color-text:    #1c2a33;
	--color-muted:   var(--nimr-muted);
	--color-link:    var(--nimr-700);
	--color-link-hover: var(--nimr-800);

	--surface-page:    var(--nimr-white);
	--surface-subtle:  var(--nimr-cloud);
	--surface-warm:    var(--nimr-cream);
	--surface-invert:  var(--nimr-900);
	--border-subtle:   var(--nimr-line);

	/* --- Typography ------------------------------------------------------- */
	/* Roboto Condensed kept for display identity; Inter/system for body.
	   Bespoke templates enqueue the webfonts; these are the stack fallbacks. */
	--font-display: "Roboto Condensed", "Archivo", "Inter", system-ui, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

	/* Fluid type scale (1.20 mobile -> 1.25 desktop) */
	--step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
	--step-0:  clamp(1.00rem, 0.93rem + 0.30vw, 1.13rem);
	--step-1:  clamp(1.20rem, 1.09rem + 0.50vw, 1.50rem);
	--step-2:  clamp(1.44rem, 1.27rem + 0.80vw, 2.00rem);
	--step-3:  clamp(1.73rem, 1.47rem + 1.20vw, 2.66rem);
	--step-4:  clamp(2.07rem, 1.70rem + 1.80vw, 3.55rem);
	--step-5:  clamp(2.49rem, 1.94rem + 2.60vw, 4.74rem);
	--step-6:  clamp(2.99rem, 2.20rem + 3.80vw, 6.31rem);

	--leading-tight: 1.08;
	--leading-snug: 1.25;
	--leading-normal: 1.6;
	--tracking-tight: -0.02em;
	--tracking-wide: 0.08em;

	/* --- Spacing scale (fluid) ------------------------------------------- */
	--space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
	--space-2xs: clamp(0.50rem, 0.47rem + 0.15vw, 0.63rem);
	--space-xs:  clamp(0.75rem, 0.70rem + 0.22vw, 0.94rem);
	--space-s:   clamp(1.00rem, 0.93rem + 0.30vw, 1.25rem);
	--space-m:   clamp(1.50rem, 1.40rem + 0.45vw, 1.88rem);
	--space-l:   clamp(2.00rem, 1.86rem + 0.60vw, 2.50rem);
	--space-xl:  clamp(3.00rem, 2.79rem + 0.90vw, 3.75rem);
	--space-2xl: clamp(4.00rem, 3.72rem + 1.20vw, 5.00rem);
	--space-3xl: clamp(6.00rem, 5.58rem + 1.80vw, 7.50rem);

	/* --- Structure ------------------------------------------------------- */
	--container: 1200px;
	--container-wide: 1440px;
	--container-narrow: 760px;
	--gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-pill: 999px;

	/* --- Elevation (soft, brand-tinted) ---------------------------------- */
	--shadow-xs: 0 1px 2px rgba(6, 40, 61, 0.06);
	--shadow-sm: 0 2px 8px rgba(6, 40, 61, 0.08);
	--shadow-md: 0 10px 30px -12px rgba(6, 40, 61, 0.22);
	--shadow-lg: 0 24px 60px -20px rgba(6, 40, 61, 0.30);
	--shadow-brand: 0 16px 40px -16px rgba(26, 169, 224, 0.45);

	/* --- Motion ---------------------------------------------------------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 160ms;
	--dur: 280ms;
	--dur-slow: 560ms;

	--focus-ring: 0 0 0 3px var(--nimr-white), 0 0 0 6px var(--nimr-500);
}

/* ---------------------------------------------------------------------------
   Universally-safe enhancements (no layout overrides for existing pages)
   ------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/* Consistent, brand-coloured keyboard focus for accessibility (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

::selection {
	background: var(--nimr-300);
	color: var(--nimr-900);
}

:root {
	accent-color: var(--nimr-500);
	scrollbar-color: var(--nimr-400) transparent;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* Screen-reader-only utility for accessible labels in bespoke templates. */
.nimr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-link (shown on focus) for keyboard users. */
.nimr-skip-link {
	position: absolute;
	left: var(--space-s);
	top: -100px;
	z-index: 100000;
	background: var(--nimr-900);
	color: #fff;
	padding: var(--space-2xs) var(--space-s);
	border-radius: var(--radius-sm);
	transition: top var(--dur) var(--ease-out);
}
.nimr-skip-link:focus {
	top: var(--space-s);
}