/*
 * ATA Institute design tokens.
 *
 * Concept: the workshop and the lecture hall. ATA teaches code and it teaches
 * wig making; both are hands-on trades. The system reads as a serious training
 * institution with workshop credibility, not a SaaS startup.
 *
 * Colour is grounded in adire indigo (Yoruba indigo-dyed cloth) rather than
 * flag green, and deliberately avoids the cream-and-terracotta palette that
 * every generated education site currently uses.
 */

:root {
	/* Core palette */
	--ata-indigo-900: #16234e;
	--ata-indigo-700: #1d3272;
	--ata-indigo-600: #2b47a8;
	--ata-indigo-300: #9db0e0;
	--ata-indigo-100: #e6eaf6;
	--ata-brass-500: #a9781c;
	--ata-brass-100: #f5ebd6;

	/* Neutrals */
	--ata-ink: #14161c;
	--ata-slate-700: #3a404d;
	--ata-slate-500: #5b6270;
	--ata-slate-300: #9aa1ad;
	--ata-line: #dde1e8;
	--ata-paper: #f6f7f9;
	--ata-white: #ffffff;

	/* Status: functional only, never decorative */
	--ata-success: #1b7a4b;
	--ata-success-bg: #e8f4ee;
	--ata-warning: #8a6100;
	--ata-warning-bg: #fbf1dc;
	--ata-error: #a32020;
	--ata-error-bg: #fbeaea;
	--ata-neutral-bg: #eef0f4;

	/* Type */
	--ata-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--ata-font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Mono is reserved for machine-generated identifiers: student ids, matric
	   numbers, transaction references. It carries meaning, it is not a style tic. */
	--ata-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Scale: 1.25 ratio, fluid between 360px and 1200px viewports */
	--ata-text-xs: 0.75rem;
	--ata-text-sm: 0.875rem;
	--ata-text-base: 1rem;
	--ata-text-lg: 1.25rem;
	--ata-text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.5625rem);
	--ata-text-2xl: clamp(1.625rem, 1.35rem + 1.2vw, 1.9375rem);
	--ata-text-3xl: clamp(1.9375rem, 1.5rem + 1.9vw, 2.4375rem);
	--ata-text-4xl: clamp(2.25rem, 1.6rem + 2.9vw, 3.0625rem);

	--ata-leading-tight: 1.2;
	--ata-leading-snug: 1.35;
	--ata-leading-normal: 1.6;
	--ata-measure: 68ch;

	/* Spacing: 8pt scale */
	--ata-space-1: 0.25rem;
	--ata-space-2: 0.5rem;
	--ata-space-3: 0.75rem;
	--ata-space-4: 1rem;
	--ata-space-6: 1.5rem;
	--ata-space-8: 2rem;
	--ata-space-12: 3rem;
	--ata-space-16: 4rem;
	--ata-space-24: 6rem;

	/* Radius: one per element class, not one for everything */
	--ata-radius-button: 4px;
	--ata-radius-card: 6px;
	--ata-radius-pill: 999px;

	/* Elevation is structural. Static cards get a border, not a shadow. */
	--ata-shadow-overlay: 0 8px 24px rgba(20, 22, 28, 0.16);

	--ata-container: 1200px;
	--ata-focus-ring: 0 0 0 2px var(--ata-white), 0 0 0 4px var(--ata-indigo-600);
}

@media (prefers-color-scheme: dark) {
	/* The portal is used on phones in bright daylight and at night. Dark mode is
	   opt-in per surface rather than a blanket inversion, so tokens are declared
	   but only applied by components that have been designed for it. */
	:root {
		--ata-dark-surface: #0f1524;
		--ata-dark-raised: #182036;
		--ata-dark-line: #2a3350;
		--ata-dark-ink: #eef1f7;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--ata-paper);
	color: var(--ata-ink);
	font-family: var(--ata-font-body);
	font-size: var(--ata-text-base);
	line-height: var(--ata-leading-normal);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--ata-font-display);
	font-weight: 700;
	line-height: var(--ata-leading-tight);
	margin: 0 0 var(--ata-space-4);
	font-stretch: 105%;
}

p {
	margin: 0 0 var(--ata-space-4);
	max-width: var(--ata-measure);
}

a {
	color: var(--ata-indigo-600);
	text-underline-offset: 0.15em;
}

:focus-visible {
	outline: none;
	box-shadow: var(--ata-focus-ring);
	border-radius: var(--ata-radius-button);
}

.ata-mono {
	font-family: var(--ata-font-mono);
	font-size: 0.95em;
	letter-spacing: -0.01em;
}

/* Motion answers an action. It does not decorate a page. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}