/* Tokens. Three layers:
   1. Primitives: raw values, same names and values as wuxia-web tokens.css.
   2. Semantic: what a value means. Components use these.
   3. Component: sizes that belong to one component.
   Only this file holds raw colour, spacing and radius values (TokenLintTest). */

/* ---- 1. primitives (moved from style.css unchanged) ---- */
/* Tokens: same names and values as wuxia-web src/styles/tokens.css. Change them there first. */
:root {
	color-scheme: dark;
	--bg: #000000;
	--surface: #141414;
	--card: #181818;
	--control: #2b2b2b;
	--control-high: #3a3a3a;
	--hairline: #404040;
	--text: #ffffff;
	--text-2: #b3b3b3;
	--text-3: #808080;
	--red: #e50914;
	/* Netflix red is 3.9:1 on black: fine for fills, too dim for small text. */
	--red-text: #ff4d55;
	--red-deep: #b20710;
	--red-shadow: #7a0308;
	--gold: #f5c518;

	--radius-xs: 2px;
	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 12px;
	--radius-pill: 999px;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--t-feedback: 120ms;
	--t-state: 200ms;
	--t-transition: 320ms;
	--t-focal: 600ms;

	--font: "Kantumruy Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gutter: 16px;
	--page-x: 16px;
	--cols: 3;
	--poster-w: 108px;
	--nav-h: 64px;
	--bar-h: 56px;
	--pills-h: 44px;
	--hdr-h: var(--bar-h);
	--safe-b: env(safe-area-inset-bottom, 0px);
	--safe-t: env(safe-area-inset-top, 0px);
}
@media (min-width: 600px) {
	:root { --page-x: 24px; --cols: 5; --poster-w: 124px; }
}
@media (min-width: 900px) {
	:root { --page-x: 4vw; --cols: 6; --bar-h: 68px; }
}
@media (min-width: 1400px) {
	:root { --cols: 7; }
}
@media (min-width: 1800px) {
	:root { --cols: 8; }
}

/* ---- 2. semantic ---- */
:root {
	--color-text: var(--text);
	--color-text-muted: var(--text-2);
	--color-text-subtle: var(--text-3);
	--color-surface: var(--surface);
	--color-control: var(--control);
	--color-control-hover: var(--control-high);
	--color-light: #ffffff;
	--color-light-hover: rgba(255, 255, 255, 0.78);
	--color-on-light: #000000;
	--color-accent: var(--red);
	--color-accent-hover: var(--red-deep);
	--color-danger-text: var(--red-text);
	--color-outline: rgba(255, 255, 255, 0.55);
	--color-outline-subtle: rgba(255, 255, 255, 0.3);
	--color-hover-wash: rgba(255, 255, 255, 0.12);
	--color-scrim-strong: rgba(0, 0, 0, 0.55);
	--scrim-caption: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.6) 60%, transparent);
	--shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.6);

	--space-0-5: 2px;
	--space-1: 4px;
	--space-1-5: 6px;
	--space-2: 8px;
	--space-2-5: 10px;
	--space-3: 12px;
	--space-3-5: 14px;
	--space-4: 16px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-12: 48px;

	--text-xs: 11px;
	--text-s: 12px;
	--text-sm: 13px;
	--text-m: 14px;
	--text-l: 16px;
	--text-xl: 20px;
	--text-2xl: 24px;
}

/* ---- 3. component ---- */
:root {
	--button-height: 40px;
	--button-height-l: 44px;
	--button-height-hero: 48px;
	--button-pad-hero: 22px;
	--pill-height: 32px;
	--tag-height: 28px;
	--icon-action-width: 64px;
	--hit-min: 44px;
	--hit-extend: 6px;
	--hit-extend-x: 3px;
	--hit-extend-l: 11px;
	--hit-extend-lx: 6px;
	--caption-pad-top: 28px;
	--field-height: 48px;
	--field-width: 420px;
	--focus-ring-width: 2px;
	--short-column: 420px;
	--short-progress: 3px;
	--short-actions-gap: 18px;
	--blur-backdrop: 28px;
	--short-spinner: 40px;
	--short-spinner-line: 3px;
	--short-avatar: 48px;
	--shadow-glyph: 0 2px 12px rgba(0, 0, 0, 0.55);
	--shadow-text: 0 1px 8px rgba(0, 0, 0, 0.55);
	--underline-offset: 3px;
	--short-avatar-ring: 2px;
	--short-rail-width: 64px;
	--short-ctl: 36px;
	--short-side: 220px;
	--short-arrow: 44px;
	--short-gutter-right: 80px;
	--scrim-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 45%, transparent);
}