/*
 * SiteRank AI design tokens.
 *
 * One accent, one type family, one spacing scale. Severity and evidence carry their own
 * ramps so a status colour is never confused with the brand colour. See
 * `.claude/skills/product-ui-design/SKILL.md` for the reasoning behind each decision.
 */

:root {
	/* Ground and surfaces — cool paper, not warm cream */
	--sr-paper: #f5f6f8;
	--sr-surface: #ffffff;
	--sr-surface-sunk: #eef0f3;
	--sr-ink: #121820;
	--sr-ink-soft: #1b232e;
	--sr-graphite: #4b5563;
	/* 4.84:1 on the paper ground. The previous #6b7480 measured 4.38 and failed WCAG AA for
	   body text, which is where most of this colour is used. */
	--sr-mute: #646d7a;
	--sr-line: #e3e6ea;
	--sr-line-strong: #cdd2d9;

	/* One accent. Deep teal: signal and instrumentation, not "AI purple". */
	--sr-beacon: #0f6c7e;
	--sr-beacon-deep: #0b5361;
	--sr-beacon-soft: #e4f1f3;
	--sr-beacon-line: #bcdde2;

	/* Evidence tiers — amber and violet, deliberately unlike the severity ramp */
	--sr-tier-standard: #0f6c7e;
	--sr-tier-official: #1d4ed8;
	--sr-tier-strong: #047857;
	--sr-tier-emerging: #b45309;
	--sr-tier-experimental: #6d28d9;
	--sr-tier-hypothesis: #5f6773;

	/* The same six tiers against the ink ground. The dark-surface variants are separate
	   values rather than an opacity trick: the light-ground colours measure between 2.4:1 and
	   3.4:1 on ink, and a tier label is text that has to be read. */
	--sr-tier-standard-on-ink: #67d2e3;
	--sr-tier-official-on-ink: #93b8ff;
	--sr-tier-strong-on-ink: #6bdba6;
	--sr-tier-emerging-on-ink: #f0b45c;
	--sr-tier-experimental-on-ink: #c0a8ff;
	--sr-tier-hypothesis-on-ink: #b0bac6;

	/* Severity — always paired with a text label, never colour alone */
	--sr-critical: #b42318;
	--sr-critical-soft: #fef3f2;
	--sr-high: #b45309;
	--sr-high-soft: #fffaeb;
	--sr-medium: #175cd3;
	--sr-medium-soft: #eff8ff;
	--sr-low: #475467;
	--sr-low-soft: #f2f4f7;
	--sr-good: #027a48;
	--sr-good-soft: #ecfdf3;

	/* Type: one family, weight and size do the work */
	--sr-font: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sr-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--sr-step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
	--sr-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--sr-step-1: clamp(1.15rem, 1.1rem + 0.25vw, 1.25rem);
	--sr-step-2: clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);
	--sr-step-3: clamp(1.7rem, 1.5rem + 1vw, 2.15rem);
	--sr-step-4: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
	--sr-step-5: clamp(2.5rem, 1.9rem + 3vw, 4rem);

	/* Spacing: 4px base */
	--sr-1: 0.25rem;
	--sr-2: 0.5rem;
	--sr-3: 0.75rem;
	--sr-4: 1rem;
	--sr-5: 1.5rem;
	--sr-6: 2rem;
	--sr-7: 3rem;
	--sr-8: 4rem;
	--sr-9: 6rem;
	--sr-10: 8rem;

	--sr-radius-sm: 4px;
	--sr-radius: 8px;
	--sr-radius-lg: 14px;

	/* Restrained elevation. Borders carry most of the structure. */
	--sr-shadow-sm: 0 1px 2px rgba(18, 24, 32, 0.05);
	--sr-shadow: 0 2px 8px -2px rgba(18, 24, 32, 0.08), 0 1px 2px rgba(18, 24, 32, 0.04);
	--sr-shadow-lg: 0 18px 40px -18px rgba(18, 24, 32, 0.28);

	--sr-measure: 68ch;
	--sr-width: 1200px;
	--sr-width-narrow: 780px;
	--sr-motion: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sr-motion: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}