/**
 * Sistema de diseño de OnlineReserve.
 *
 * Un único archivo de tokens que consumen el plugin y el theme, para que el
 * horario, el modal de reserva y el resto del sitio se vean como una sola pieza
 * y no como dos piezas pegadas.
 *
 * El lenguaje visual es el de Apple: mucho espacio en blanco, tipografía de
 * sistema, una escala de grises muy contenida, un solo color de acento, radios
 * generosos y sombras casi imperceptibles. El color de acento se sobrescribe
 * desde los ajustes del plugin mediante --orv-accent.
 */

:root {
	/* --- Tipografía ---------------------------------------------------- */
	/* La pila de sistema da SF Pro en Apple y Segoe en Windows: la misma
	   sensación nativa en cada plataforma, sin descargar ninguna fuente. */
	--orv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--orv-text-xs: 0.75rem;    /* 12px - metadatos */
	--orv-text-sm: 0.8125rem;  /* 13px - etiquetas */
	--orv-text-base: 1.0625rem;/* 17px - cuerpo, el tamaño de lectura de Apple */
	--orv-text-lg: 1.25rem;    /* 20px */
	--orv-text-xl: 1.75rem;    /* 28px */
	--orv-text-2xl: 2.5rem;    /* 40px */
	--orv-text-3xl: 3.5rem;    /* 56px - hero */

	--orv-leading-tight: 1.1;
	--orv-leading-snug: 1.25;
	--orv-leading-normal: 1.55;

	/* Los titulares grandes piden tracking negativo; el cuerpo, ninguno. */
	--orv-tracking-tight: -0.022em;
	--orv-tracking-tighter: -0.035em;
	--orv-tracking-wide: 0.06em;

	--orv-weight-regular: 400;
	--orv-weight-medium: 500;
	--orv-weight-semibold: 600;

	/* --- Espaciado ------------------------------------------------------ */
	--orv-space-1: 0.25rem;
	--orv-space-2: 0.5rem;
	--orv-space-3: 0.75rem;
	--orv-space-4: 1rem;
	--orv-space-5: 1.5rem;
	--orv-space-6: 2rem;
	--orv-space-7: 2.5rem;
	--orv-space-8: 4rem;
	--orv-space-9: 6rem;

	/* --- Color ---------------------------------------------------------- */
	--orv-accent: #0071e3;
	--orv-accent-hover: #0077ed;
	--orv-accent-soft: rgba(0, 113, 227, 0.1);

	--orv-ink: #1d1d1f;        /* Casi negro, nunca #000 */
	--orv-ink-soft: #424245;
	--orv-ink-muted: #86868b;
	--orv-ink-faint: #b8b8bd;

	--orv-surface: #ffffff;
	--orv-surface-sunken: #f5f5f7;
	--orv-surface-raised: #ffffff;
	--orv-border: #e8e8ed;
	--orv-border-strong: #d2d2d7;

	--orv-success: #1d8a4e;
	--orv-warning: #bf6a00;
	--orv-danger: #d70015;
	--orv-danger-soft: rgba(215, 0, 21, 0.08);
	--orv-warning-soft: rgba(191, 106, 0, 0.10);

	/* --- Forma ---------------------------------------------------------- */
	--orv-radius-sm: 8px;
	--orv-radius: 14px;
	--orv-radius-lg: 20px;
	--orv-radius-pill: 980px;  /* El radio de píldora de los botones de Apple */

	/* Sombras muy difusas y de baja opacidad: se perciben como profundidad,
	   no como un borde gris. */
	--orv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--orv-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	--orv-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);

	/* --- Movimiento ------------------------------------------------------ */
	--orv-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--orv-duration: 240ms;
	--orv-duration-fast: 160ms;

	/* --- Disposición ----------------------------------------------------- */
	--orv-container: 1120px;
	--orv-container-narrow: 720px;
}

/* Modo oscuro por preferencia del sistema. Los tokens cambian de valor; ningún
   componente necesita saber en qué modo está. */
@media (prefers-color-scheme: dark) {
	:root:not([data-orv-theme="light"]) {
		--orv-accent-soft: rgba(41, 151, 255, 0.16);
		--orv-accent: #2997ff;
		--orv-accent-hover: #47a6ff;

		--orv-ink: #f5f5f7;
		--orv-ink-soft: #d2d2d7;
		--orv-ink-muted: #98989d;
		--orv-ink-faint: #6e6e73;

		--orv-surface: #000000;
		--orv-surface-sunken: #1d1d1f;
		--orv-surface-raised: #1d1d1f;
		--orv-border: #2c2c2e;
		--orv-border-strong: #3a3a3c;

		--orv-success: #30d158;
		--orv-warning: #ff9f0a;
		--orv-danger: #ff453a;
		--orv-danger-soft: rgba(255, 69, 58, 0.14);
		--orv-warning-soft: rgba(255, 159, 10, 0.16);

		--orv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--orv-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
		--orv-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);
	}
}

/* Modo oscuro forzado por el theme. */
[data-orv-theme="dark"] {
	--orv-accent: #2997ff;
	--orv-accent-hover: #47a6ff;
	--orv-accent-soft: rgba(41, 151, 255, 0.16);

	--orv-ink: #f5f5f7;
	--orv-ink-soft: #d2d2d7;
	--orv-ink-muted: #98989d;
	--orv-ink-faint: #6e6e73;

	--orv-surface: #000000;
	--orv-surface-sunken: #1d1d1f;
	--orv-surface-raised: #1d1d1f;
	--orv-border: #2c2c2e;
	--orv-border-strong: #3a3a3c;

	--orv-danger-soft: rgba(255, 69, 58, 0.14);
	--orv-warning-soft: rgba(255, 159, 10, 0.16);
}

/* Quien haya pedido menos movimiento en su sistema no debería recibir
   animaciones decorativas. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--orv-duration: 1ms;
		--orv-duration-fast: 1ms;
	}
}