/* ==========================================================================
   Katma 2027 — base.css
   Design tokens, reset and bare element styles.
   Token names follow the project brief (CLAUDE.md, sections 4–7).
   ========================================================================== */

:root {
	/* --- Brand colour --------------------------------------------------- */
	--katma-red: #ED1F28;
	--katma-red-dark: #C9151E;
	--katma-black: #111111;
	--katma-charcoal: #242424;
	--katma-text: #303030;
	--katma-muted: #6A625A;
	--katma-stone: #D8D1C7;
	--katma-line: #E8E2DA;
	--katma-ivory: #F8F5EF;
	--katma-cream: #FBF9F5;
	--katma-white: #FFFFFF;

	/* --- Semantic roles -------------------------------------------------- */
	--color-bg: var(--katma-white);
	--color-bg-alt: var(--katma-cream);
	--color-bg-warm: var(--katma-ivory);
	--color-text: var(--katma-text);
	--color-heading: var(--katma-black);
	--color-muted: var(--katma-muted);
	--color-border: var(--katma-line);
	--color-accent: var(--katma-red);
	--color-accent-hover: var(--katma-red-dark);

	/* --- Type ------------------------------------------------------------ */
	--font-display: "Lora", Georgia, "Times New Roman", serif;
	--font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.5rem;
	--text-3xl: clamp(3rem, 6vw, 5.75rem);

	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	--tracking-wide: 0.08em;
	--tracking-wider: 0.16em;

	/* --- Space ----------------------------------------------------------- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6.5rem;

	/* --- Layout ---------------------------------------------------------- */
	--container: 1280px;
	--container-wide: 1440px;
	--container-narrow: 760px;
	--gutter: clamp(20px, 4vw, 56px);

	/* --- Shape ----------------------------------------------------------- */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;

	--border-hairline: 1px solid var(--color-border);

	/* --- Motion ---------------------------------------------------------- */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--duration: 180ms;

	/* --- Chrome ---------------------------------------------------------- */
	--header-height: 84px;
	--focus-ring: 2px solid var(--katma-red);
	--focus-offset: 3px;
}

@media (max-width: 900px) {
	:root {
		--header-height: 64px;
	}
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* No blanket fill here: the icon set is stroked and carries fill="none", and a
   CSS fill would beat that presentation attribute and turn every icon into a
   solid blob. Each SVG declares its own fill. */

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ==========================================================================
   Bare elements
   ========================================================================== */

a {
	color: var(--color-heading);
	text-decoration-color: var(--color-border);
	text-underline-offset: 0.2em;
	transition: color var(--duration) var(--ease);
}

a:hover {
	color: var(--color-accent);
}

hr {
	border: 0;
	border-top: var(--border-hairline);
	margin-block: var(--space-xl);
}

/* Focus: always visible, never removed. Brief §24. */
:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

::selection {
	background-color: var(--katma-red);
	color: var(--katma-white);
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.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;
	top: var(--space-2xs);
	left: var(--space-2xs);
	z-index: 999;
	padding: var(--space-2xs) var(--space-sm);
	background-color: var(--katma-black);
	color: var(--katma-white);
	font-size: var(--text-sm);
	font-weight: 600;
	border-radius: var(--radius-xs);
	transform: translateY(-200%);
	transition: transform var(--duration) var(--ease);
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--katma-white);
}