/**
 * Ugett Store — design tokens.
 * Premium dark, Valorant-inspired: deep black / charcoal / gunmetal surfaces,
 * crimson accent, soft off-white text, metallic micro-details.
 */
:root {
	/* Surfaces — deep black to gunmetal */
	--ug-black: #0a0b0d;
	--ug-charcoal: #101216;
	--ug-gunmetal: #171a1f;
	--ug-surface: #1d2127;
	--ug-surface-2: #242932;
	--ug-glass: rgba(20, 23, 28, 0.72);
	--ug-glass-border: rgba(255, 255, 255, 0.06);

	/* Text — soft white / light gray */
	--ug-text: #ece8e1;          /* off-white */
	--ug-text-2: #b6b8c0;
	--ug-text-muted: #7b7e88;

	/* Accent — Valorant crimson */
	--ug-red: #ff4655;
	--ug-red-bright: #ff5f6d;
	--ug-red-deep: #cc2f3d;
	--ug-red-glow: rgba(255, 70, 85, 0.35);
	--ug-red-soft: rgba(255, 70, 85, 0.12);

	/* Metallic details */
	--ug-metal: #9aa0ab;
	--ug-metal-hi: #d7dae0;
	--ug-metal-grad: linear-gradient(135deg, #d7dae0 0%, #8b909b 45%, #5b5f68 100%);

	/* Borders */
	--ug-border: rgba(255, 255, 255, 0.07);
	--ug-border-strong: rgba(255, 255, 255, 0.14);
	--ug-border-red: rgba(255, 70, 85, 0.4);

	/* Typography */
	--ug-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ug-font-display: "Rajdhani", var(--ug-font);
	--ug-tracking: 0.01em;
	--ug-tracking-wide: 0.18em;

	/* Layout */
	--ug-wrap: 1280px;
	--ug-gutter: clamp(18px, 4vw, 44px);
	--ug-header: 76px;
	--ug-trust: 34px;

	/* Radii — sharper, more tactical than the reference */
	--ug-radius: 6px;
	--ug-radius-lg: 12px;
	--ug-radius-sm: 3px;
	--ug-radius-pill: 999px;

	/* Angular corner cut used on cards/buttons (Valorant-inspired) */
	--ug-cut: 10px;

	/* Spacing scale */
	--ug-space-2xs: 6px;
	--ug-space-xs: 10px;
	--ug-space-sm: 14px;
	--ug-space-md: 22px;
	--ug-space-lg: 34px;
	--ug-space-xl: 52px;
	--ug-section-y: clamp(60px, 8vw, 104px);

	/* Shadows */
	--ug-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
	--ug-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
	--ug-shadow-card: 0 2px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--ug-border);
	--ug-shadow-red: 0 8px 30px var(--ug-red-glow);

	/* Motion */
	--ug-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ug-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ug-dur: 0.28s;
	--ug-dur-slow: 0.55s;

	--ug-touch: 44px;
}