/**
 * AVM Wallet Theme
 *
 * CSS custom properties for theming the wallet components.
 * Override these variables in your application to customize the appearance.
 *
 * Colors use space-separated RGB values for opacity support:
 * background-color: rgb(var(--avm-color-primary));
 * background-color: rgb(var(--avm-color-primary) / 0.5);
 */

:where(:root) {
	/* ==================== Colors ==================== */

	/* Primary action color (buttons, links) */
	--avm-color-primary: 37 99 235; /* blue-600 */
	--avm-color-primary-hover: 29 78 216; /* blue-700 */
	--avm-color-primary-active: 30 64 175; /* blue-800 */
	--avm-color-on-primary: 255 255 255; /* white text on primary fills */

	/* Secondary color */
	--avm-color-secondary: 115 115 115; /* neutral-500 */
	--avm-color-secondary-hover: 82 82 82; /* neutral-600 */

	/* Status colors */
	--avm-color-success: 34 197 94; /* green-500 */
	--avm-color-warning: 234 179 8; /* yellow-500 */
	--avm-color-error: 239 68 68; /* red-500 */
	--avm-color-info: 59 130 246; /* blue-500 */

	/* ==================== Backgrounds ==================== */

	--avm-bg-primary: 255 255 255; /* white */
	--avm-bg-secondary: 250 250 250; /* neutral-50 */
	--avm-bg-tertiary: 245 245 245; /* neutral-100 */
	--avm-bg-hover: 245 245 245; /* neutral-100 */
	--avm-bg-active: 229 229 229; /* neutral-200 */
	--avm-bg-overlay: 0 0 0; /* black for overlay with opacity */
	--avm-bg-overlay-opacity: 0.4;

	/* ==================== Text ==================== */

	--avm-text-primary: 23 23 23; /* neutral-900 */
	--avm-text-secondary: 115 115 115; /* neutral-500 */
	--avm-text-tertiary: 163 163 163; /* neutral-400 */
	--avm-text-inverse: 255 255 255; /* white */
	--avm-text-muted: 115 115 115; /* neutral-500 */

	/* ==================== Borders ==================== */

	--avm-border-color: 229 229 229; /* neutral-200 */
	--avm-border-focus: 59 130 246; /* blue-500 */
	--avm-border-error: 239 68 68; /* red-500 */

	/* ==================== Spacing ==================== */

	--avm-spacing-xs: 0.25rem; /* 4px */
	--avm-spacing-sm: 0.5rem; /* 8px */
	--avm-spacing-md: 1rem; /* 16px */
	--avm-spacing-lg: 1.5rem; /* 24px */
	--avm-spacing-xl: 2rem; /* 32px */
	--avm-spacing-2xl: 3rem; /* 48px */

	/* ==================== Border Radius ==================== */

	--avm-radius-sm: 0.25rem; /* 4px */
	--avm-radius-md: 0.5rem; /* 8px */
	--avm-radius-lg: 0.75rem; /* 12px */
	--avm-radius-xl: 1rem; /* 16px */
	--avm-radius-2xl: 1.5rem; /* 24px */
	--avm-radius-full: 9999px;

	/* ==================== Shadows ==================== */

	--avm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
	--avm-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08);
	--avm-shadow-lg: 0 4px 12px rgb(0 0 0 / 0.08);
	--avm-shadow-xl: 0 8px 24px rgb(0 0 0 / 0.12);

	/* ==================== Typography ==================== */

	--avm-font-family:
		system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
		sans-serif;
	--avm-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	--avm-font-size-xs: 0.75rem; /* 12px */
	--avm-font-size-sm: 0.875rem; /* 14px */
	--avm-font-size-base: 1rem; /* 16px */
	--avm-font-size-lg: 1.125rem; /* 18px */
	--avm-font-size-xl: 1.25rem; /* 20px */

	--avm-font-weight-normal: 400;
	--avm-font-weight-medium: 500;
	--avm-font-weight-semibold: 600;
	--avm-font-weight-bold: 700;

	--avm-line-height-tight: 1.25;
	--avm-line-height-normal: 1.5;
	--avm-line-height-relaxed: 1.75;

	/* ==================== Transitions ==================== */

	--avm-transition-fast: 150ms ease-out;
	--avm-transition-normal: 200ms ease-out;
	--avm-transition-slow: 300ms ease-out;
	--avm-transition-timing: ease-out;

	/* ==================== Z-Index ==================== */

	--avm-z-dropdown: 40;
	--avm-z-modal-backdrop: 50;
	--avm-z-modal: 60;
	--avm-z-toast: 70;

	/* ==================== Component Specific ==================== */

	/* Button */
	--avm-btn-height: 2.5rem; /* 40px */
	--avm-btn-padding-x: var(--avm-spacing-md);
	--avm-btn-padding-y: var(--avm-spacing-sm);
	--avm-btn-font-size: var(--avm-font-size-sm);
	--avm-btn-font-weight: var(--avm-font-weight-semibold);
	--avm-btn-radius: var(--avm-radius-md);

	/* Wallet list */
	--avm-wallet-list-width: 20rem; /* 320px */
	--avm-wallet-list-max-height: 80vh;

	/* Modal */
	--avm-modal-width: 28rem; /* 448px */
	--avm-modal-max-width: calc(100vw - 2rem);

	/* Wallet item */
	--avm-wallet-item-height: 3.5rem; /* 56px */
	--avm-wallet-icon-size: 2rem; /* 32px */

	/* Address display */
	--avm-address-font: var(--avm-font-mono);
}

/* ==================== Dark Mode ==================== */

:where(.dark, [data-theme='dark']) {
	--avm-color-primary: 96 165 250; /* blue-400 */
	--avm-color-primary-hover: 147 197 253; /* blue-300 */
	--avm-color-primary-active: 191 219 254; /* blue-200 */
	--avm-color-on-primary: 23 23 23; /* neutral-900 text on primary fills */

	--avm-color-secondary: 163 163 163; /* neutral-400 */
	--avm-color-secondary-hover: 212 212 212; /* neutral-300 */

	--avm-color-success: 74 222 128; /* green-400 */
	--avm-color-warning: 250 204 21; /* yellow-400 */
	--avm-color-error: 248 113 113; /* red-400 */

	--avm-bg-primary: 23 23 23; /* neutral-900 */
	--avm-bg-secondary: 38 38 38; /* neutral-850 */
	--avm-bg-tertiary: 64 64 64; /* neutral-700 */
	--avm-bg-hover: 38 38 38; /* neutral-850 */
	--avm-bg-active: 64 64 64; /* neutral-700 */

	--avm-text-primary: 250 250 250; /* neutral-50 */
	--avm-text-secondary: 163 163 163; /* neutral-400 */
	--avm-text-tertiary: 115 115 115; /* neutral-500 */
	--avm-text-muted: 115 115 115; /* neutral-500 */

	--avm-border-color: 64 64 64; /* neutral-700 */
}

/* ==================== Utility Classes ==================== */

.avm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.avm-focus-ring {
	outline: 2px solid rgb(var(--avm-border-focus));
	outline-offset: 2px;
}