/*
 * Realm — Design System
 * Castlevania-inspired: deep cold tones, orange accent, flat geometry
 *
 * Architecture: CSS @layer for cascade control
 * Colors: oklch with relative color syntax
 * SVG: fill-only, no stroke, CSS-controlled
 */

@layer reset, tokens, base, layout, components, utilities;

/* ================================================================
   @property — typed custom properties for smooth animation
   ================================================================ */

@property --fill-current {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.85 0.02 240);
}

@property --fill-accent {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(0.72 0.18 55);
}

/* ================================================================
   RESET
   ================================================================ */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

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

	img,
	svg {
		display: block;
		max-width: 100%;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	ul,
	ol {
		list-style: none;
	}
}

/* ================================================================
   TOKENS
   ================================================================ */

@layer tokens {
	:root {
		/* === Background scale (deep cold) === */
		--bg-abyss: oklch(0.10 0.02 260);
		--bg-deep: oklch(0.15 0.03 255);
		--bg-mid: oklch(0.22 0.04 250);
		--bg-surface: oklch(0.28 0.04 245);
		--bg-elevated: oklch(0.35 0.04 240);

		/* === Text scale === */
		--text-primary: oklch(0.85 0.02 240);
		--text-secondary: oklch(0.60 0.03 250);
		--text-dim: oklch(0.42 0.03 255);

		/* === Accent: high-saturation orange (sole emphasis) === */
		--accent: oklch(0.72 0.18 55);
		--accent-bright: oklch(from var(--accent) calc(l + 0.1) c h);
		--accent-dim: oklch(from var(--accent) calc(l - 0.15) c h);
		--accent-glow: oklch(from var(--accent) l c h / 0.3);

		/* === Spacing === */
		--space-xs: 0.25rem;
		--space-sm: 0.5rem;
		--space-md: 1rem;
		--space-lg: 2rem;
		--space-xl: 4rem;

		/* === Typography === */
		--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
		--font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;
		--text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
		--text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
		--text-lg: clamp(1.2rem, 1rem + 1vw, 1.75rem);
		--text-xl: clamp(1.8rem, 1.4rem + 2vw, 3rem);

		/* === Motion === */
		--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
		--ease-out: cubic-bezier(0, 0, 0.2, 1);
		--duration-fast: 150ms;
		--duration-normal: 300ms;
		--duration-slow: 600ms;
	}

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

/* ================================================================
   BASE
   ================================================================ */

@layer base {
	html {
		color-scheme: dark;
	}

	body {
		font-family: var(--font-body);
		font-size: var(--text-base);
		line-height: 1.6;
		color: var(--text-primary);
		background-color: var(--bg-abyss);
		min-height: 100dvh;
		overflow-x: hidden;
	}

	h1,
	h2,
	h3 {
		line-height: 1.2;
		color: var(--text-primary);
	}

	h1 { font-size: var(--text-xl); }
	h2 { font-size: var(--text-lg); }
	h3 { font-size: var(--text-base); }

	p {
		color: var(--text-secondary);
	}

	code {
		font-family: var(--font-mono);
		font-size: 0.9em;
	}

	::selection {
		background: var(--accent-glow);
		color: var(--text-primary);
	}
}

/* ================================================================
   LAYOUT
   ================================================================ */

@layer layout {
	.realm {
		display: grid;
		place-items: center;
		min-height: 100dvh;
		padding: var(--space-lg);
	}

	.realm-container {
		width: 100%;
		max-width: 72rem;
		margin-inline: auto;
		padding-inline: var(--space-md);
	}

	/* Phase 3 scene viewport — reserves full-screen space */
	.realm-scene {
		position: relative;
		width: 100%;
		min-height: 100dvh;
		overflow: hidden;
	}

	/* Scene depth layers (Phase 3) */
	.realm-layer {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.realm-layer--far { z-index: 1; }
	.realm-layer--mid { z-index: 2; }
	.realm-layer--near { z-index: 3; }
	.realm-layer--ui { z-index: 10; }
}

/* ================================================================
   COMPONENTS
   ================================================================ */

@layer components {
	/* --- Navigation --- */

	.realm-nav {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		align-items: center;
		text-align: center;
	}

	.realm-nav a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: var(--text-lg);
		color: var(--text-secondary);
		transition: color var(--duration-normal) var(--ease-default);
	}

	.realm-nav a:hover,
	.realm-nav a:focus-visible {
		color: var(--accent);
	}

	.realm-nav a:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 4px;
	}

	/* --- Realm Title / Sigil --- */

	.realm-sigil {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-lg);
		margin-block-end: var(--space-xl);
	}

	.realm-sigil svg {
		width: clamp(6rem, 15vw, 12rem);
		height: auto;
	}

	.realm-sigil__title {
		font-size: var(--text-xl);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-primary);
	}

	.realm-sigil__subtitle {
		font-size: var(--text-sm);
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--text-dim);
	}

	/* --- SVG Components --- */

	/* Fill defaults: all SVG paths inherit from CSS, not inline attributes */
	.svg-icon {
		fill: var(--fill-current);
		transition: fill var(--duration-normal) var(--ease-default);
	}

	.svg-icon--accent {
		fill: var(--fill-accent);
	}

	/* Interactive SVG elements */
	.svg-interactive {
		cursor: pointer;
		transition:
			fill var(--duration-normal) var(--ease-default),
			opacity var(--duration-fast) var(--ease-default),
			transform var(--duration-normal) var(--ease-default);
		transform-origin: center;
	}

	.svg-interactive:hover {
		fill: var(--accent);
		transform: scale(1.05);
	}

	/* Decorative divider */
	.realm-divider {
		width: 100%;
		max-width: 20rem;
		height: auto;
		margin-inline: auto;
		opacity: 0.3;
	}

	.realm-divider path {
		fill: var(--text-dim);
	}

	/* --- Card / Panel --- */

	.realm-panel {
		background: var(--bg-surface);
		padding: var(--space-lg);
		container-type: inline-size;
	}

	@container (min-width: 30rem) {
		.realm-panel {
			padding: var(--space-xl);
		}
	}
}

/* ================================================================
   UTILITIES
   ================================================================ */

@layer utilities {
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.text-accent { color: var(--accent); }
	.text-dim { color: var(--text-dim); }
	.fill-accent { fill: var(--accent); }
	.fill-primary { fill: var(--text-primary); }
}