/*
 * Weight Pocket — la paleta de la web pública (portada, planes y contacto), con sus dos modos.
 *
 * Es el ÚNICO sitio donde la web escribe un color: los CSS de las páginas leen estos tokens
 * (`tests/jest/web/siteTheme.test.ts`). Valores de `docs/design-direction.md` §1–§4 y de
 * `constants/depth.ts`: lavanda y violeta en claro; negro y lima en oscuro.
 *
 * Lo cargan las tres páginas ANTES que sus CSS. Las cinco páginas legales no lo cargan: por eso
 * `site-footer.css` (que comparten) no lee tokens y el pie se viste al final de este fichero.
 */

/* Instrument Serif Italic, servida desde la propia web (sin proveedor de fuentes). SIL Open Font
   License 1.1: el .ttf va SIN modificar y su licencia al lado (`InstrumentSerif-OFL.txt`). */
@font-face {
    font-family: 'Instrument Serif';
    src: url('InstrumentSerif-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

/* La forma: igual en los dos modos. */
:root {
    color-scheme: light dark;
    --wp-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wp-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --wp-r-hero: 28px; /* héroe, oferta, formulario */
    --wp-r-card: 24px; /* tarjetas */
    --wp-r-row: 20px; /* filas */
    --wp-r-tile: 18px; /* cuadrados */
    --wp-r-ctl: 14px; /* controles */
    --wp-r-pill: 12px; /* píldoras */
}

/* El color — claro. Todo token de aquí tiene su valor en el bloque oscuro. */
:root {
    --wp-bg: #eeeafe;
    --wp-card: #ffffff;
    --wp-ink: #0f172a;
    --wp-ink2: #475569;
    --wp-line: #e4defc;
    --wp-acc: #6366f1;
    --wp-accink: #4338ca;
    --wp-soft: #f4f1fe;
    --wp-ok: #047857;
    /* El borde de una superficie sobre otra: en claro no hace falta; en oscuro, sin él, se funden. */
    --wp-edge: transparent;
    --wp-scrim: rgba(15, 23, 42, 0.45);

    /* Escenario del héroe y el teléfono (portada). */
    --wp-stage: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    --wp-device: #0f172a;
    --wp-device-sh: 0 30px 50px rgba(15, 23, 42, 0.38);
    --wp-float-sh: 0 18px 40px rgba(15, 23, 42, 0.2);

    /* Tarjeta de oferta, con texto blanco encima (`DEPTH_OFFER_CARD_LIGHT`). */
    --wp-offer: linear-gradient(135deg, #4f46e5, #7c3aed);
    --wp-onoffer: #ffffff;
    --wp-onoffer2: rgba(255, 255, 255, 0.86);
    --wp-offer-acc: #ffffff;
    --wp-offer-plan-edge: transparent;
    --wp-offer-inset: rgba(255, 255, 255, 0.14);
    --wp-save-bg: #ffffff;
    --wp-save-ink: #047857;

    /* Botón principal. El degradado del CTA de la app (#6366F1 → #7C5CF6 → #8B5CF6) deja el texto
       blanco a 4,47 / 4,45 / 4,23 : 1; en la web el texto del botón no lleva sombra, así que va
       sobre el violeta de la oferta (6,29 / 5,70 : 1), el mismo que la app usa para el blanco. */
    --wp-cta: var(--wp-offer);
    --wp-oncta: #ffffff;
    --wp-cta-chip: rgba(255, 255, 255, 0.22);
    --wp-inv: #ffffff;
    --wp-oninv: #4338ca;
    --wp-inv-chip: rgba(67, 56, 202, 0.12);

    --wp-glow: 0 12px 32px rgba(99, 102, 241, 0.28);
    --wp-cardsh: 0 4px 14px rgba(15, 23, 42, 0.06);

    /* Sección WiPi (portada). */
    --wp-deep: #1e1b4b;
    --wp-ondeep: #ffffff;
    --wp-ondeep2: rgba(255, 255, 255, 0.78);
    --wp-deepacc: #c4b5fd;
    --wp-ondeepacc: #1e1b4b;
    --wp-deep-line: rgba(255, 255, 255, 0.22);
    /* La burbuja de WiPi: blanca en los dos modos, como en la app. */
    --wp-bubble: #ffffff;
    --wp-onbubble: #0f172a;
    --wp-onbubble2: #475569;
    /* La ficha del código QR del diálogo de descarga: blanca en los dos modos (un QR necesita
       fondo claro para que lo lea la cámara). */
    --wp-qr: #ffffff;
}

/* El color — oscuro. */
@media (prefers-color-scheme: dark) {
    :root {
        --wp-bg: #000000;
        --wp-card: #161618;
        --wp-ink: #f1f5f9;
        --wp-ink2: #94a3b8;
        --wp-line: #2a2a2d;
        --wp-acc: #c5f62d;
        --wp-accink: #c5f62d;
        --wp-soft: #161618;
        --wp-ok: #34d399;
        --wp-edge: #2a2a2d;
        --wp-scrim: rgba(0, 0, 0, 0.72);

        --wp-stage: linear-gradient(135deg, #1e1e22, #161618, #111113);
        --wp-device: #000000;
        --wp-device-sh: 0 30px 50px rgba(0, 0, 0, 0.6);
        --wp-float-sh: none;

        --wp-offer: var(--wp-stage);
        --wp-onoffer: #f1f5f9;
        --wp-onoffer2: #94a3b8;
        --wp-offer-acc: #c5f62d;
        --wp-offer-plan-edge: #c5f62d;
        --wp-offer-inset: #222226;
        --wp-save-bg: #c5f62d;
        --wp-save-ink: #0a2c24;

        --wp-cta: linear-gradient(135deg, #d9ff57, #c5f62d, #acdc1c);
        --wp-oncta: #0a2c24;
        --wp-cta-chip: rgba(10, 44, 36, 0.14);
        --wp-inv: #c5f62d;
        --wp-oninv: #0a2c24;
        --wp-inv-chip: rgba(10, 44, 36, 0.14);

        --wp-glow: none;
        --wp-cardsh: none;

        --wp-deep: #161618;
        --wp-ondeep: #f1f5f9;
        --wp-ondeep2: #94a3b8;
        --wp-deepacc: #c5f62d;
        --wp-ondeepacc: #0a2c24;
        --wp-deep-line: #2a2a2d;
        --wp-bubble: #ffffff;
        --wp-onbubble: #0f172a;
        --wp-onbubble2: #475569;
        --wp-qr: #ffffff;
    }
}

/* Titulares: van en 800–900 con `letter-spacing` negativo y, sin aire entre palabras, a 1440 px se
   leen juntas («Una inversión en»). Una sola regla para las tres páginas. */
h1,
h2 {
    word-spacing: 0.08em;
}

/*
 * El pie. Lo genera `npm run legal:build` (`scripts/web/siteFooter.ts`) y `site-footer.css` no se
 * edita: lo cargan también las páginas legales, que no tienen estos tokens. Se viste aquí, en un
 * solo sitio, con un `html` delante para ganarle a `site-footer.css` (que se carga después).
 * Sólo color y peso: la geometría sigue siendo la del pie.
 */
html .wpf {
    border-top-color: var(--wp-line);
    color: var(--wp-ink);
}
html .wpf-brand,
html .wpf-brand b {
    font-weight: 800;
}
html .wpf-brand b {
    color: var(--wp-acc);
}
html .wpf-tag,
html .wpf-links,
html .wpf-bottom {
    color: var(--wp-ink2);
}
html .wpf-links {
    font-weight: 600;
}
html .wpf-links a:hover {
    color: var(--wp-accink);
}
/* El botón «Reducir movimiento» (sólo en el pie de la portada). */
html .motion-toggle {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-pill);
    background: transparent;
    color: var(--wp-ink2);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
html .motion-toggle[aria-pressed='true'] {
    background: var(--wp-soft);
    color: var(--wp-accink);
}