/* ════════════════════════════════════════════════════════════════════════
   RESTOHUB v2 — TOKENS
   ════════════════════════════════════════════════════════════════════════

   Fuente única de verdad del sistema de diseño. Implementa la sección 3 de
   CLAUDE.md y nada más.

   `tailwind.config.js` NO redefine estos valores: los referencia con var().
   Si un token cambia, cambia acá y se propaga a las utilities sin recompilar
   nada (salvo que se agregue un token nuevo, que sí exige `npm run build:css`).

   Reglas que este archivo hace cumplir:
     · Un contenedor.  1200px. No hay un segundo ancho.
     · Tres radios.    12 · 20 · 9999.
     · Cuatro pasos de texto. El piso es .48 y es absoluto.
     · Tres superficies.
     · Siete tamaños tipográficos.

   Lo que NO está acá no existe en el sistema. Si hace falta un valor nuevo,
   se discute y se agrega acá — no se improvisa con un valor arbitrario en el
   markup.
   ════════════════════════════════════════════════════════════════════════ */

:root {

	/* ────────────────────────────────────────────────────────────────
	   COLOR — marca
	   Se conserva del sitio actual. No se reabre (CLAUDE.md §6).
	   ──────────────────────────────────────────────────────────────── */
	--rh-bg:       #16161d;   /* fondo global */
	--rh-bg-2:     #101015;   /* footer, zonas hundidas */
	--rh-bg-light: #F6F5F2;   /* secciones claras — ver "MODO CLARO" abajo */
	--rh-accent:   #ff6b00;   /* acento primario */
	--rh-accent-2: #ff7a1a;   /* segundo stop del gradiente */

	/* Acento para TEXTO sobre fondo claro. #ff6b00 sobre #F6F5F2 da 2,9:1 y
	   no pasa AA (4,5:1 para texto normal). El naranja de marca se conserva
	   para rellenos —un botón naranja con texto blanco sí pasa—, pero el
	   acento como texto necesita esta versión oscurecida. */
	--rh-accent-ink: #c2410c;   /* 4,75:1 sobre --rh-bg-light */

	/* Color del texto que va ENCIMA del naranja de marca.
	   Blanco sobre #ff6b00 da 2,86:1 y no pasa AA — así venía desde el
	   sitio actual, en todos los CTA primarios. Carbón sobre el mismo
	   naranja da 6,30:1 sin tocar el color de marca.
	   Como token y no repetido en cada componente: el día que el acento
	   cambie, el contraste se revisa en un solo lugar. */
	--on-accent: #16161d;       /* 6,30:1 sobre --rh-accent */

	/* Semánticos. --rh-win significa "ahorro" y nada más: no es un verde
	   decorativo ni un color de CTA. El CTA de WhatsApp va en ghost con
	   borde naranja, precisamente para no colisionar con esta lectura. */
	--rh-win:  #4ade80;   /* ahorro, ✓ */
	--rh-loss: #f87171;   /* pérdida, ✕ */
	--rh-mid:  #fbbf24;   /* parcial, ~ */

	/* ────────────────────────────────────────────────────────────────
	   TEXTO — cuatro pasos
	   PISO ABSOLUTO: .48. Prohibido bajar de ahí.
	   Las opacidades /30 y /40 del sitio actual no pasan contraste AA y
	   son ilegibles en proyector, que es exactamente donde se muestra
	   esto en una reunión de venta.
	   ──────────────────────────────────────────────────────────────── */
	--text-1: #ffffff;                 /* titulares */
	--text-2: rgba(255,255,255,.78);   /* body */
	--text-3: rgba(255,255,255,.60);   /* body secundario */
	--text-4: rgba(255,255,255,.48);   /* captions y legales — PISO */

	/* Tinta base de las secciones claras. Es el --rh-bg usado como texto:
	   el mismo carbón, no un negro nuevo. */
	--text-dark: #16161d;

	/* ────────────────────────────────────────────────────────────────
	   SUPERFICIES — tres planos
	   Las cards llevan sombra propia (ver --shadow-card). Hoy no tienen
	   ninguna mientras la página está llena de glows naranjas, así que el
	   contenido principal termina siendo lo menos jerarquizado.
	   ──────────────────────────────────────────────────────────────── */
	--surface-1: rgba(255,255,255,.03);  /* fondo de sección */
	--surface-2: rgba(255,255,255,.06);  /* card por defecto */
	--surface-3: rgba(255,255,255,.09);  /* card destacada / hover */

	/* Borde de superficie. Un solo valor: el sitio actual tiene varios. */
	--border-1: rgba(255,255,255,.10);

	/* Sombra de card. Existe para que el contenido gane jerarquía: es la
	   herramienta de profundidad del sistema.

	   Lenguaje "command center": la separación entre planos se consigue con
	   borde sutil + sombra profunda, NO con glows. El tema actual usa halos
	   naranjas difusos (.ambient-lights) que iluminan el fondo y dejan el
	   contenido plano encima. Acá es al revés: fondo quieto, contenido con
	   relieve. Por eso esos glows no se portaron al v2. */
	--shadow-card:   0 4px 24px -4px rgba(0,0,0,.40);
	--shadow-card-2: 0 12px 40px -8px rgba(0,0,0,.55);
	--shadow-deep:   0 32px 80px -16px rgba(0,0,0,.70);   /* piezas protagonistas */

	/* Sombra para elevar una COLUMNA de tabla. Sin desplazamiento vertical
	   a propósito: las celdas de una columna van pegadas una debajo de la
	   otra, y una sombra con offset hacia abajo (como --shadow-card) se
	   proyecta sobre la celda siguiente y dibuja una línea entre filas.
	   Sin offset, el halo es continuo y la columna se lee como un bloque. */
	--shadow-columna: 0 0 32px -4px rgba(0,0,0,.55);

	/* ────────────────────────────────────────────────────────────────
	   CHROME — barra de navegación
	   ──────────────────────────────────────────────────────────────── */
	--nav-h:  72px;                          /* alto de la barra */
	--nav-bg: rgba(22,22,29,.72);            /* --rh-bg translúcido, con blur */

	/* ────────────────────────────────────────────────────────────────
	   MOVIMIENTO
	   Sobrio a propósito. Esto es una interfaz operativa, no una landing
	   con animaciones de entrada. Todo respeta prefers-reduced-motion.
	   ──────────────────────────────────────────────────────────────── */
	--ease:            cubic-bezier(.4, 0, .2, 1);
	--dur:             180ms;   /* microinteracciones: hover, foco */
	--dur-flip:        620ms;   /* giro de la flip card */
	--flip-perspective: 1800px; /* alto = giro contenido; bajo = ojo de pez */

	/* Cruce del titular rotativo del hero. Dos frases se cruzan en esta
	   ventana: la que sale y la que entra. Más corto se lee como un
	   parpadeo; más largo deja un hueco visible entre las dos. */
	--dur-rotador:     520ms;

	/* ────────────────────────────────────────────────────────────────
	   TIPOGRAFÍA
	   Poppins para todo. JetBrains Mono SOLO para datos y cifras en vivo,
	   nunca como adorno.
	   ──────────────────────────────────────────────────────────────── */
	--font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

	/* Siete tamaños, ni uno más. Cada rol trae su tamaño, su peso, su
	   line-height y su tracking: son un paquete, no valores sueltos que se
	   recombinan libremente.

	   Estos son los valores de DESKTOP, tal como los fija CLAUDE.md §3.
	   La escala móvil vive en el media query del final del archivo y
	   redefine solo --fs-*: pesos, line-heights y tracking no cambian. */

	/* Display — SOLO H1 */
	--fs-display:  64px;
	--fw-display:  800;
	--lh-display:  1.02;
	--ls-display:  -0.035em;

	/* H2 */
	--fs-h2: 40px;
	--fw-h2: 800;
	--lh-h2: 1.10;
	--ls-h2: -0.025em;

	/* H3 */
	--fs-h3: 28px;
	--fw-h3: 700;
	--lh-h3: 1.20;
	--ls-h3: -0.02em;

	/* H4 */
	--fs-h4: 20px;
	--fw-h4: 700;
	--lh-h4: 1.35;

	/* Body */
	--fs-body: 16px;
	--fw-body: 400;
	--lh-body: 1.6;

	/* Small */
	--fs-small: 14px;
	--fw-small: 400;
	--lh-small: 1.55;

	/* Caption */
	--fs-caption: 12px;
	--fw-caption: 500;
	--lh-caption: 1.4;

	/* ────────────────────────────────────────────────────────────────
	   LAYOUT
	   ──────────────────────────────────────────────────────────────── */

	/* Contenedor ÚNICO. El sitio actual tiene ocho anchos distintos; este
	   es el reemplazo de los ocho. No se agrega un segundo. */
	--container: 1200px;
	--container-pad:    24px;  /* padding lateral móvil */
	--container-pad-lg: 32px;  /* padding lateral desktop */

	/* Grilla maestra */
	--grid-cols: 12;
	--gutter:    24px;

	/* Tres radios. Ni uno más. */
	--radius-input: 12px;    /* inputs, chips */
	--radius-card:  20px;    /* cards, paneles */
	--radius-pill:  9999px;  /* pills */

	/* Espaciado interno — escala 8/16/24/32/48/64 */
	--space-8:  8px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-48: 48px;
	--space-64: 64px;

	/* Espaciado ENTRE secciones — 96px uniforme.
	   Uniforme significa uniforme: no hay secciones que respiren más. */
	--space-section: 96px;
}

/* ════════════════════════════════════════════════════════════════════════
   MODO CLARO — secciones de fondo crema
   ════════════════════════════════════════════════════════════════════════

   Sobreescribe la regla de "fondo global único" de CLAUDE.md §3, por
   decisión explícita: la home alterna zonas oscuras y claras para romper la
   fatiga de un solo carbón a lo largo de 6.500px.

   ── Cómo funciona ─────────────────────────────────────────────────────
   `.rhv2-claro` NO estiliza componentes: redefine los TOKENS dentro de su
   subárbol. Como todo el CSS del tema consume var(--text-2),
   var(--surface-2), var(--border-1)…, cada componente se adapta solo al
   entrar en una sección clara. No hay una versión clara de la tarjeta, ni
   del botón, ni de la tabla: hay un juego de tokens distinto.

   La alternativa —escribir `.rhv2-claro .rhv2-plan { … }` por cada
   componente— duplicaría el CSS y garantizaría que el día que se agregue
   un componente nuevo alguien olvide su variante clara.

   ── Lo que NO es una simple inversión ─────────────────────────────────
   Los colores del sistema están calibrados contra #16161d. Sobre crema,
   varios dejan de cumplir contraste y hay que recalcularlos, no invertirlos:

     --rh-win  #4ade80 sobre #F6F5F2 → 1,7:1   ilegible
     --rh-mid  #fbbf24                → 1,6:1   ilegible
     --rh-loss #f87171                → 2,6:1   insuficiente
     --rh-accent #ff6b00              → 2,9:1   insuficiente como texto

   Un check verde menta sobre crema, que es exactamente lo que llevan los
   bullets del Plan Estándar, sería casi invisible. Abajo van las versiones
   que sí pasan AA, con su ratio anotado.
   ════════════════════════════════════════════════════════════════════════ */
.rhv2-claro {

	background-color: var(--rh-bg-light);
	color: var(--text-2);

	/* ── Texto ──────────────────────────────────────────────────────
	   El PISO de contraste sube de .48 a .62. No es una inconsistencia con
	   §3: la regla exige que el paso 4 siga siendo legible, y sobre crema
	   .48 da 3,1:1 mientras que sobre carbón sobraba. Se conserva el
	   umbral, no el número.

	   Ratios medidos contra #F6F5F2 (AA texto normal = 4,5:1). El primer
	   intento fue .58 y daba 4,28:1 — por debajo del umbral. */
	--text-1: var(--text-dark);              /* 16,51:1 */
	--text-2: rgba(22,22,29,.80);            /*  9,02:1 */
	--text-3: rgba(22,22,29,.66);            /*  5,58:1 */
	--text-4: rgba(22,22,29,.62);            /*  4,87:1 — PISO */

	/* ── Superficies ────────────────────────────────────────────────
	   Sobre crema, las cards van BLANCAS: suben de plano en vez de bajar.
	   Oscurecerlas (que sería la inversión literal) las hundiría y dejaría
	   la sección con aspecto de formulario deshabilitado. */
	--surface-1: rgba(22,22,29,.035);        /* fondo hundido */
	--surface-2: #ffffff;                    /* card por defecto */
	--surface-3: #ffffff;                    /* card destacada — se separa por sombra */

	--border-1: rgba(22,22,29,.12);

	/* ── Sombras ────────────────────────────────────────────────────
	   Mucho más suaves. Las del modo oscuro llegan a .70 de negro, que
	   sobre crema se ve como suciedad y no como profundidad. */
	--shadow-card:    0 2px 8px -2px rgba(22,22,29,.10);
	--shadow-card-2:  0 8px 24px -6px rgba(22,22,29,.14);
	--shadow-deep:    0 24px 60px -16px rgba(22,22,29,.20);
	--shadow-columna: 0 0 32px -4px rgba(22,22,29,.16);

	/* ── Semánticos recalculados ─────────────────────────────────────
	   Medidos contra #F6F5F2. Al lado va el ratio del token original del
	   modo oscuro, para que se vea por qué no bastaba con reusarlo. */
	--rh-win:  #15803d;    /* 4,60:1  — el #4ade80 original daba 1,60:1 */
	--rh-loss: #b91c1c;    /* 5,93:1  — el #f87171 original daba 2,54:1 */
	--rh-mid:  #a16207;    /* 4,52:1  — el #fbbf24 original daba 1,53:1 */

	/* El naranja de marca NO se redefine: se sigue usando como relleno de
	   botones y badges. Para el acento COMO TEXTO existe --rh-accent-ink
	   (4,75:1).

	   ⚠ OJO, y esto NO es del modo claro: el botón primario lleva texto
	     blanco sobre #ff6b00, que da 2,86:1 y no pasa AA en ninguno de los
	     dos modos. Viene así desde el sitio actual. Con texto en carbón
	     (#16161d) el mismo botón sube a 6,30:1 sin tocar el naranja de
	     marca. Es decisión de marca, está reportado. */
}

/* Zona hundida dentro de una sección clara. */
.rhv2-claro .rhv2-hundido {
	background-color: rgba(22,22,29,.04);
}

/* ════════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA MÓVIL
   ════════════════════════════════════════════════════════════════════════

   CLAUDE.md §3 fija los siete tamaños en px de desktop. Display 64px no
   entra en un viewport de 360px, así que los cuatro tamaños de titular
   bajan; body, small y caption NO cambian — el texto de lectura ya está
   dimensionado para leerse en la mano, y encogerlo solo lo empeora.

     Display   64 → 40
     H2        40 → 32
     H3        28 → 24
     H4        20 → 18
     Body / Small / Caption      sin cambios

   Se redefinen SOLO los --fs-*. Pesos, line-heights y tracking se heredan:
   son parte del rol tipográfico, no del tamaño. El tracking negativo del
   Display (-0.035em) sigue siendo correcto a 40px, que es donde el ajuste
   óptico todavía hace falta.

   Corte en 767px, el mismo que usa .rh-container para cambiar su padding
   lateral. Un solo breakpoint en todo el sistema.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	:root {
		--fs-display: 40px;
		--fs-h2:      32px;
		--fs-h3:      24px;
		--fs-h4:      18px;
	}
}