/**
 * GET YOUR SAVE design tokens.
 *
 * SNES 16-bit archive storefront: hard borders, square corners, pixel shadows.
 */

:root {
	/* Core surfaces */
	--color-bg: #e0e0e0;
	--color-bg-dark: #d3d3d3;
	--color-panel: #efefef;
	--color-panel-alt: #f7f7f7;
	--color-panel-dark: #1f1f1f;
	--color-console-shell: #2b2b2b;

	/* Text */
	--color-black: #000000;
	--color-text: #111111;
	--color-text-muted: #555555;
	--color-text-soft: #737373;
	--color-text-inverse: #ffffff;

	/* SNES controller button colors */
	--color-red: #e60012;
	--color-blue: #0072b2;
	--color-yellow: #f2a900;
	--color-green: #009b48;

	/* Supporting states */
	--color-success: var(--color-green);
	--color-info: var(--color-blue);
	--color-warning: var(--color-yellow);
	--color-danger: var(--color-red);
	--color-focus: var(--color-yellow);

	/* Typography */
	--font-pixel: "Press Start 2P", "DotGothic16", "Courier New", monospace;
	--font-body: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "Courier New", Courier, monospace;

	/* Type scale */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.375rem;
	--font-size-xl: 1.75rem;
	--font-size-2xl: 2.125rem;
	--line-height-tight: 1.2;
	--line-height-base: 1.6;
	--line-height-loose: 1.8;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;

	/* Hard UI geometry */
	--border-hard: 2px solid #000000;
	--border-hard-thick: 4px solid #000000;
	--border-red: 2px solid var(--color-red);
	--border-blue: 2px solid var(--color-blue);
	--border-yellow: 2px solid var(--color-yellow);
	--border-green: 2px solid var(--color-green);
	--shadow-pixel: 4px 4px 0 #000000;
	--shadow-pixel-small: 2px 2px 0 #000000;
	--shadow-pixel-none: 0 0 0 #000000;
	--radius-none: 0;

	/* Motion */
	--duration-fast: 120ms;
	--duration-base: 160ms;
	--ease-step: steps(2, end);

	/* Layout */
	--site-max-width: 1320px;
	--gutter-desktop: 24px;
	--gutter-tablet: 20px;
	--gutter-mobile: 16px;

	/* Z-index */
	--z-base: 1;
	--z-header: 20;
	--z-dropdown: 30;
	--z-sticky: 40;
	--z-modal: 100;

	/* Breakpoints as reference tokens for documentation and JS parity */
	--breakpoint-sm: 480px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1320px;
}