/**
 * TETRIVCI - Main Styles
 * Base styles, CSS variables, and global resets
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
	/* Colors */
	--color-bg: #000000;
	--color-text: #ddd;
	--color-text-muted: rgba(255, 255, 255, 0.6);
	--color-white: #fff;
	
	/* Glass/Card backgrounds */
	--glass-bg: rgba(0, 0, 0, 0.65);
	--glass-bg-dark: rgba(0, 0, 0, 0.7);
	--glass-bg-darker: rgba(0, 0, 0, 0.8);
	--glass-border: rgba(255, 255, 255, 0.1);
	--glass-border-light: rgba(255, 255, 255, 0.15);
	--glass-highlight: rgba(255, 255, 255, 0.08);
	
	/* Accent colors (matching tetromino palette) */
	--color-cyan: #00f0ff;
	--color-yellow: #ffd400;
	--color-purple: #c400ff;
	--color-green: #00ff99;
	--color-red: #ff4d4d;
	--color-blue: #3d7bff;
	--color-orange: #ff9100;
	--color-gold: #ffd700;
	--color-silver: #c0c0c0;
	--color-bronze: #cd7f32;
	--color-success: #00ffb4;
	
	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 16px;
	--spacing-xl: 24px;
	
	/* Border radius */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 999px;
	
	/* Shadows */
	--shadow-card: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	--shadow-button: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 40px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.45);
	--shadow-button-hover: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 14px 50px rgba(255, 255, 255, 0.18), 0 10px 28px rgba(0, 0, 0, 0.55);
	
	/* Typography */
	--font-family: system-ui, sans-serif;
	--font-weight-normal: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	
	/* Transitions */
	--transition-fast: 0.12s ease;
	--transition-normal: 0.2s ease;
}

/* ============================================
   Global Reset & Base Styles
   ============================================ */
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-family);
	touch-action: none; /* enable custom gestures */
}

/* Disable selection/highlighting globally */
*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/* Allow selection in input fields */
input[type="text"] {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

::selection {
	background: transparent;
}

/* ============================================
   Utility Classes
   ============================================ */
.small {
	font-size: 12px;
	opacity: 0.8;
}

.title {
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}

/* SEO content: visually hidden but accessible to search engines */
.seo-content {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* For users who want to read content (accessibility) */
.seo-content:focus-within {
	position: static;
	width: auto;
	height: auto;
	padding: var(--spacing-xl);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--glass-bg-darker);
}