@import '$lib/theme/catppuccin.css';

/* ============================================
   Reset
   ============================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ============================================
   Base styles
   ============================================ */
html {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Prevent layout shift from scrollbar */
	scrollbar-gutter: stable;
}

body {
	min-height: 100dvh;
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* ============================================
   Touch targets & interaction
   Poker room: TD using phone with one hand
   ============================================ */
button,
a,
input,
select,
textarea,
[role='button'],
[role='tab'],
[role='menuitem'] {
	/* Prevent double-tap zoom on mobile */
	touch-action: manipulation;
}

/* Minimum 48px touch target for all interactive elements */
.touch-target,
button,
[role='button'],
[role='tab'] {
	min-height: var(--touch-target);
	min-width: var(--touch-target);
}

/* Active/pressed state for tactile feedback */
button:active,
[role='button']:active,
[role='tab']:active,
.touch-target:active {
	transform: scale(0.97);
	opacity: 0.9;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Focus visible for keyboard accessibility */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Remove default focus ring for mouse/touch users */
:focus:not(:focus-visible) {
	outline: none;
}

/* ============================================
   Scrollbar styling (dark theme)
   ============================================ */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--color-surface-active);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-overlay);
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-surface-active) var(--color-bg);
}

/* ============================================
   Typography helpers
   ============================================ */
.font-mono {
	font-family: var(--font-mono);
}

/* Timer/number display — always monospace */
.timer,
.number,
.blinds,
.chips,
.currency {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* ============================================
   Common utility classes
   ============================================ */
.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;
}