/*
 * Design tokens — Error Tutorials
 * Dark-mode-first. Every value a template consumes lives here.
 * See THEME-PLAN.md Phase 1 / Step 4.
 */

:root {
	/* ---- Color: base surfaces ---- */
	--color-bg: #0a0b0d;          /* page background, near-black w/ blue tint */
	--color-surface: #131417;      /* cards, panels */
	--color-surface-raised: #1a1c20; /* hovered/raised surface */
	--color-border: #24262b;       /* hairline borders on dark surfaces */
	--color-border-strong: #34373d;

	/* ---- Color: text ---- */
	--color-text: #e8eaed;         /* primary body/heading text */
	--color-text-muted: #8b92a0;   /* secondary text, captions, meta */
	--color-text-faint: #7a8190;   /* disabled/tertiary — WCAG AA (4.5:1+) on bg and surface, adjusted in Step 22 (was #5b616e, ~2.4:1 on surface, failed AA) */

	/* ---- Color: accents ---- */
	--color-accent: #00e5c7;       /* electric teal — primary CTA/links */
	--color-accent-hover: #33ecd3;
	--color-accent-ink: #06120f;   /* text-on-accent (dark, for contrast on teal) */
	--color-accent-2: #ff6b4a;     /* warm coral — secondary CTA, highlights */
	--color-accent-2-hover: #ff8567;

	/* ---- Color: semantic ---- */
	--color-success: #2ecc8f;
	--color-warning: #ffb020;
	--color-danger: #ff5c5c;
	--color-info: var(--color-accent);

	/* ---- Typography ---- */
	--font-display: 'Space Grotesk', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

	--fs-xs: 0.75rem;    /* 12px */
	--fs-sm: 0.875rem;   /* 14px */
	--fs-base: 1rem;     /* 16px */
	--fs-md: 1.125rem;   /* 18px */
	--fs-lg: 1.375rem;   /* 22px */
	--fs-xl: 1.75rem;    /* 28px */
	--fs-2xl: 2.25rem;   /* 36px */
	--fs-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);      /* 32px → 48px, fluid */
	--fs-4xl: clamp(2.25rem, 1.7rem + 2.75vw, 3.75rem); /* 36px → 60px, fluid */

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-normal: 1.6;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Spacing scale (4px base) ---- */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 3rem;     /* 48px */
	--space-8: 4rem;     /* 64px */
	--space-9: 6rem;     /* 96px */
	--space-10: 8rem;    /* 128px */

	/* ---- Radius ---- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-full: 999px;

	/* ---- Shadow / glow ---- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
	--glow-accent: 0 0 0 1px rgba(0, 229, 199, 0.4), 0 0 24px rgba(0, 229, 199, 0.15);
	--glow-accent-2: 0 0 0 1px rgba(255, 107, 74, 0.4), 0 0 24px rgba(255, 107, 74, 0.15);

	/* ---- Layout ---- */
	--container-max: 1200px;
	--container-pad: var(--space-5);

	/* ---- Motion ---- */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 400ms;
	--duration-reveal: 600ms;

	/* Scroll-reveal travel distance — zeroed under reduced motion below */
	--reveal-distance: 20px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-normal: 0ms;
		--duration-slow: 0ms;
		--duration-reveal: 0ms;
		--reveal-distance: 0px;
	}
}