/* ============================================================================
 * VIKIPOS — Design tokens
 * Variables CSS globales. Todas las demás hojas referencian estas.
 * ============================================================================ */

:root {
	/* Colores */
	--color-bg: #0a0a0f;
	--color-surface: #14141c;
	--color-surface-2: #1b1b28;
	--color-border: #1f1f2e;
	--color-text: #ededf5;
	--color-text-muted: #9090a8;
	--color-bg-light: #ffffff;
	--color-bg-soft: #f7f7fb;
	--color-text-dark: #0a0a0f;
	--color-text-dark-muted: #555572;

	--color-accent-primary: #6c63ff;
	--color-accent-primary-hover: #5a52e6;
	--color-accent-retail: #ff6b9d;
	--color-accent-resto: #f7971e;
	--color-success: #43e97b;

	--color-gradient-primary: linear-gradient(135deg, #6c63ff 0%, #00d4ff 100%);
	--color-gradient-retail: linear-gradient(135deg, #ff6b9d 0%, #6c63ff 100%);
	--color-gradient-resto: linear-gradient(135deg, #f7971e 0%, #ff6b9d 100%);

	/* Tipografía — coherente con okviki.com */
	--font-display: 'Sora', system-ui, -apple-system, sans-serif;
	--font-body: 'Sora', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

	--fs-xs:   0.8125rem;  /* 13 */
	--fs-sm:   0.875rem;   /* 14 */
	--fs-base: 1rem;       /* 16 */
	--fs-md:   1.125rem;   /* 18 */
	--fs-lg:   1.25rem;    /* 20 */
	--fs-xl:   1.5rem;     /* 24 */
	--fs-2xl:  2rem;       /* 32 */
	--fs-3xl:  2.5rem;     /* 40 */
	--fs-4xl:  3.25rem;    /* 52 */
	--fs-5xl:  4rem;       /* 64 */

	--lh-tight: 1.1;
	--lh-snug:  1.25;
	--lh-base:  1.6;
	--lh-loose: 1.8;

	/* Layout */
	--container: 1200px;
	--container-narrow: 860px;
	--pad-x-mobile: 24px;
	--pad-x-desktop: 40px;
	--sec-pad-mobile: 80px;
	--sec-pad-desktop: 120px;

	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 20px;
	--radius-pill: 999px;

	/* Sombras sutiles, solo en superficies elevadas */
	--shadow-sm: 0 1px 2px rgba(10, 10, 15, 0.06);
	--shadow-md: 0 4px 16px rgba(10, 10, 15, 0.08);
	--shadow-lg: 0 12px 40px rgba(10, 10, 15, 0.12);
	--shadow-glow: 0 0 60px rgba(108, 99, 255, 0.25);

	/* Animación */
	--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--dur-fast: 120ms;
	--dur-base: 220ms;
	--dur-slow: 420ms;

	/* Z-index */
	--z-header: 100;
	--z-overlay: 200;
	--z-modal: 300;
	--z-cookies: 400;
}

/* Reset ligero — complementa al reset del parent */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body.vikipos-page {
	background-color: var(--color-bg-light);
	color: var(--color-text-dark);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
}

/* Secciones oscuras */
.vk-dark {
	background-color: var(--color-bg);
	color: var(--color-text);
}

.vk-dark a { color: var(--color-text); }
.vk-dark .vk-muted { color: var(--color-text-muted); }

/* Focus accesible */
:focus-visible {
	outline: 2px solid var(--color-accent-primary);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

/* Selection */
::selection {
	background: var(--color-accent-primary);
	color: #fff;
}