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

:root {
	/* Reference mockup colors */
	--gys-black-deep: #050505;
	--gys-black-ink: #161616;
	--gys-black-line: #000;
	--gys-snes-plastic-gray: #d7d7d7;
	--gys-snes-plastic-gray-dark: #bfbfbf;
	--gys-snes-plastic-gray-light: #ececec;
	--gys-snes-panel-gray: #e7e7e7;
	--gys-snes-panel-white: #f7f7f7;

	/* Region, condition, and CIB label colors */
	--gys-label-red: #d2201f;
	--gys-label-blue: #2354a4;
	--gys-label-green: #2e7d32;
	--gys-label-yellow: #f2ca2e;
	--gys-label-ntsc-u: var(--gys-label-blue);
	--gys-label-cib: var(--gys-label-green);
	--gys-label-loose: var(--gys-label-blue);
	--gys-label-grade: var(--gys-label-yellow);

	/* Core surfaces */
	--color-bg: var(--gys-snes-plastic-gray-dark);
	--color-bg-dark: #111;
	--color-panel: var(--gys-snes-plastic-gray);
	--color-panel-alt: var(--gys-snes-panel-white);
	--color-panel-dark: var(--gys-black-ink);
	--color-console-shell: var(--gys-black-deep);

	/* Text */
	--color-black: var(--gys-black-line);
	--color-text: #111;
	--color-text-muted: #555;
	--color-text-soft: #737373;
	--color-text-inverse: #fff;

	/* SNES controller and label colors */
	--color-red: var(--gys-label-red);
	--color-blue: var(--gys-label-blue);
	--color-yellow: var(--gys-label-yellow);
	--color-green: var(--gys-label-green);

	/* 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 */
	--gys-border-main: 2px solid #000;
	--border-hard: var(--gys-border-main);
	--border-hard-thick: 4px solid #000;
	--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);
	--radius-none: 0;
	--gys-radius-none: 0;

	/* Retro panel relief */
	--gys-shadow-raised: inset 2px 2px 0 #fff, inset -2px -2px 0 #777;
	--gys-shadow-raised-strong: inset 3px 3px 0 #fff, inset -3px -3px 0 #777;
	--gys-shadow-sunken: inset 2px 2px 0 #777, inset -2px -2px 0 #fff;
	--gys-shadow-panel: inset 2px 2px 0 #fff, inset -2px -2px 0 rgba(0, 0, 0, 0.28);
	--gys-shadow-panel-strong: inset 3px 3px 0 #fff, inset -3px -3px 0 rgba(0, 0, 0, 0.36);
	--gys-shadow-console-inset: inset 0 5px 0 #050505;
	--gys-shadow-pixel: 4px 4px 0 #000;
	--gys-shadow-pixel-small: 2px 2px 0 #000;
	--shadow-pixel: var(--gys-shadow-pixel);
	--shadow-pixel-small: var(--gys-shadow-pixel-small);
	--shadow-pixel-none: 0 0 0 #000;

	/* 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;
}

*,
*::before,
*::after {
	border-radius: 0 !important;
}