/* ==========================================================================
   Autratech · Design tokens
   The single source of truth for colour, type, space, radius, shadow & motion.
   Consumed by every other stylesheet and the JS motion layer.
   ========================================================================== */

:root {
	/* --- Brand palette · "Signal" (light, corporate-blue) ------------- */
	--at-primary: #5186ec;   /* signal blue        */
	--at-secondary: #0eb176; /* emerald           */
	--at-accent: #f8bc54;    /* warm amber        */
	--at-primary-deep: #346bcb;
	--at-success: #2fb84c;
	--at-warning: #f6ab29;
	--at-danger: #ff5a6a;

	/* --- Neutrals ----------------------------------------------------- */
	--at-bg: #ffffff;
	--at-surface: #f5f6fa;
	--at-surface-2: #eceff6;
	--at-border: #e1e6f1;
	--at-text: #161C27;      /* near-black indigo ink */
	--at-ink-soft: #475367;
	--at-ink-faint: #8691a5;
	--at-muted: #656f85;
	--at-white: #ffffff;
	--at-canvas: #f7f9fc;    /* light neutral canvas  */
	--at-cream: #edf0f6;

	/* --- Derived / alpha ---------------------------------------------- */
	--at-primary-08: rgba(81,134,236, 0.08);
	--at-primary-15: rgba(81,134,236, 0.15);
	--at-ink-04: rgba(22,28,39, 0.04);
	--at-ink-08: rgba(22,28,39, 0.08);
	--at-ink-12: rgba(22,28,39, 0.12);
	--at-line: rgba(22,28,39, 0.1);
	--at-line-2: rgba(22,28,39, 0.16);

	/* --- Gradients ---------------------------------------------------- */
	--at-grad-brand: linear-gradient(135deg, var(--at-primary) 0%, var(--at-primary-deep) 100%);
	--at-grad-aurora: linear-gradient(120deg, var(--at-primary) 0%, var(--at-secondary) 55%, var(--at-accent) 100%);
	--at-grad-text: linear-gradient(100deg, var(--at-primary) 0%, var(--at-secondary) 50%, var(--at-primary-deep) 100%);
	--at-grad-frost: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
	--at-grad-mesh:
		radial-gradient(60% 60% at 15% 20%, rgba(81,134,236, 0.20) 0%, transparent 60%),
		radial-gradient(50% 50% at 85% 15%, rgba(14,177,118, 0.18) 0%, transparent 60%),
		radial-gradient(55% 55% at 70% 85%, rgba(248,188,84, 0.20) 0%, transparent 60%);

	/* --- Glass -------------------------------------------------------- */
	--at-glass-bg: rgba(255,255,255, 0.62);
	--at-glass-border: rgba(255,255,255, 0.7);
	--at-glass-blur: 18px;

	/* --- Typography --------------------------------------------------- */
	--at-font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
	--at-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--at-font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--at-font-hand: "Shantell Sans", "Bricolage Grotesque", cursive;

	--at-fs-display: clamp(3.25rem, 8.5vw, 7.5rem);
	--at-fs-h1: clamp(2.5rem, 6vw, 5rem);
	--at-fs-h2: clamp(2rem, 4.5vw, 3.75rem);
	--at-fs-h3: clamp(1.35rem, 2.4vw, 1.9rem);
	--at-fs-lead: clamp(1.05rem, 1.6vw, 1.375rem);
	--at-fs-body: 1.0625rem;
	--at-fs-small: 0.875rem;
	--at-fs-eyebrow: 0.8125rem;

	--at-lh-tight: 1.02;
	--at-lh-snug: 1.15;
	--at-lh-body: 1.65;

	/* --- Spacing scale ------------------------------------------------ */
	--at-space-1: 0.5rem;
	--at-space-2: 0.75rem;
	--at-space-3: 1rem;
	--at-space-4: 1.5rem;
	--at-space-5: 2rem;
	--at-space-6: 3rem;
	--at-space-7: 4rem;
	--at-space-8: 6rem;
	--at-section: clamp(5rem, 11vw, 9.5rem);
	--at-container: 1240px;
	--at-container-wide: 1440px;
	--at-gutter: clamp(1.25rem, 4vw, 3rem);

	/* --- Radius ------------------------------------------------------- */
	--at-r-sm: 12px;
	--at-r-md: 18px;
	--at-r-lg: 28px;
	--at-r-xl: 40px;
	--at-r-pill: 999px;

	/* --- Shadow ------------------------------------------------------- */
	--at-shadow-sm: 0 2px 8px rgba(16,37,41, 0.06);
	--at-shadow-soft: 0 12px 40px -14px rgba(16,37,41, 0.16);
	--at-shadow-luxury: 0 40px 90px -30px rgba(43,200,229, 0.28);
	--at-shadow-glass: 0 8px 32px rgba(16,37,41, 0.09), inset 0 1px 0 rgba(255,255,255, 0.65);

	/* --- Motion ------------------------------------------------------- */
	--at-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--at-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
	--at-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--at-dur-fast: 0.25s;
	--at-dur: 0.5s;
	--at-dur-slow: 0.8s;

	--at-z-nav: 800;
	--at-z-overlay: 900;
	--at-z-cursor: 9999;
	--at-z-loader: 10000;
}

/* Honour user preference: neutralise heavy motion + glass blur cost. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--at-dur-fast: 0.001s;
		--at-dur: 0.001s;
		--at-dur-slow: 0.001s;
	}
}

/* --- Screen-reader / skip-link utilities ---------------------------------
   Loaded on every view (unlike base.css, which the front page skips) since
   the skip-link markup in header.php is universal. Without this, the raw
   unstyled link renders as plain visible text at the very top of the page. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	padding: 0.75rem 1.25rem; background: var(--at-text); color: #fff;
	border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }