/* Tokens de la web de BEMO: la portada del grupo y las landings de producto.
   Fuente: los DESIGN.md de bemo-inmo, bemo-med, bemo-shop y bemo-sports, más
   la decisión de color de septiembre de 2026.

   Tres capas:
   · FAMILIA  — neutros, espaciado, radios, tipografía y movimiento. Iguales
                en todas las páginas: es lo que hace hermanos a los productos.
   · GRUPO    — el azul de BEMO. Es el isotipo de la portada y su acción.
   · PRODUCTO — un acento por vertical: INMO naranja, MED teal, SHOP rojo y
                SPORTS verde. Dentro de cada producto el isotipo toma ese color.

   Regla heredada y respetada: ningún componente define un color. Todos salen
   de acá. Si un color no está en este archivo, no existe.

   Tres estados de tema: sin atributo manda el sistema; data-theme="light" o
   "dark" (el botón de la página, o el visor) gana en las dos direcciones. */

:root {
  color-scheme: light;

  /* ── Neutros de papel. El 95% de la pantalla ── */
  --bg:          #fbfbfa;
  --surface:     #ffffff;
  --surface-2:   #f5f3ee;
  /* Escalón de portada: el #efece5 de las apps da 1,18:1 contra una tarjeta
     blanca y a distancia de portada se lee plano. */
  --surface-3:   #e2e7e3;
  --line:        #e7e5e1;
  --line-strong: #d8d5cf;

  --ink:     #14201f;
  --ink-2:   #33403f;
  --muted:   #5b6766;
  /* El corregido de INMO/SPORTS (4,83:1 sobre --surface-2). */
  --muted-2: #626d6b;

  /* ── Grupo: el azul de BEMO ──
     Es el color del isotipo de la portada. --logo es lo que pinta el cuadrado
     de la "B": en la portada vale el azul, dentro de un producto vale el color
     de ese producto. */
  --marca:        #2c5fd4;
  --marca-suave:  #e8eefb;
  --marca-linea:  #c6d4f3;
  /* Como texto: 6,9:1 sobre --bg y 5,8:1 sobre --surface-3. */
  --marca-fuerte: #2350b5;
  --marca-rotulo: #2350b5;
  --logo:         var(--marca);
  /* El azul del grupo con nombre propio: dentro de un producto --marca pasa a
     ser el color del producto, pero el enlace "Parte de BEMO" sigue azul. */
  --grupo-logo:   #2c5fd4;

  /* La acción de la portada es el mismo azul: el teal ahora es de MED, y usar
     el color de un producto para los botones del grupo confundiría. */
  --accent:       #2c5fd4;   /* blanco encima: 5,7:1 */
  --accent-hover: #2350b5;
  --accent-tint:  #e8eefb;
  --accent-line:  #c6d4f3;
  --on-accent:    #ffffff;
  --accent-ink:   #2350b5;   /* 6,3:1 sobre su tint */

  /* ── Productos. Cada uno con los mismos cinco derivados ── */
  /* INMO: el naranja del isotipo original. Como acción va su variante fuerte,
     porque #d2703f con texto blanco da 3,43:1. */
  --inmo:       #b45c30;
  --inmo-hover: #9e512a;
  --inmo-tint:  #f6e7de;
  --inmo-line:  #ecc9b4;
  --inmo-ink:   #9e512a;
  --on-inmo:    #ffffff;
  --inmo-logo:  #d2703f;

  /* MED: el teal de la familia. */
  --med:       #0e7c86;
  --med-hover: #0b656d;
  --med-tint:  #e1f1f2;
  --med-line:  #bfe0e2;
  --med-ink:   #0b656d;
  --on-med:    #ffffff;
  --med-logo:  #0e7c86;

  /* SHOP: su rojo de siempre. */
  --shop:       #c8322a;
  --shop-hover: #a8291f;
  --shop-tint:  #fceae8;
  --shop-line:  #f2c7c1;
  --shop-ink:   #9e241d;
  --on-shop:    #ffffff;
  --shop-logo:  #c8322a;

  /* SPORTS: verde de cancha, apagado. 5,3:1 con texto blanco. */
  --sports:       #2a7a4f;
  --sports-hover: #21633f;
  --sports-tint:  #e4f2e9;
  --sports-line:  #c0e0cc;
  --sports-ink:   #1f5f3c;
  --on-sports:    #ffffff;
  --sports-logo:  #2a7a4f;

  /* Sobre tinta (oscura en los dos temas) cada uno usa su versión clara,
     fija. Todas pasan 6:1 sobre su tinta. */
  --grupo-claro:  #9db8f2;
  --inmo-claro:   #f0a377;
  --med-claro:    #6cbcc3;
  --shop-claro:   #f0928a;
  --sports-claro: #7ccb9f;

  /* ── Semánticos, apagados. Idénticos en los cuatro repos ── */
  --success: #2e7d5b;  --success-tint: #e4f2eb;  --success-line: #c3e0d3;
  --warning: #b5760a;  --warning-tint: #faf0dc;  --warning-line: #ecd9ae;
  --danger:  #b23a32;  --danger-tint:  #fbeaea;  --danger-line:  #f0cdcb;
  /* Texto sobre cada tint, medido contra el tint y no contra blanco. */
  --success-ink: #236146;   /* 6,4:1 */
  --warning-ink: #85570a;   /* 5,4:1 */
  --danger-ink:  #9a2f28;

  /* ── Superficie oscura de portada ──
     La misma rampa de luminosidad con el hue rotado al color de la página:
     azul noche en la portada; cada landing de producto rota al suyo. */
  --tinta:      #0f2036;
  --tinta-2:    #132641;
  --tinta-3:    #1b3354;
  --sobre-tinta:    #e9eef5;
  --sobre-tinta-2:  #9ba8b9;
  --tinta-linea:   rgba(255, 255, 255, .11);
  --tinta-linea-2: rgba(255, 255, 255, .22);
  /* La acción sobre tinta es el acento en su versión clara, con texto oscuro
     encima. */
  --sobre-tinta-accent:       #7fa3f0;
  --sobre-tinta-accent-hover: #9db8f2;
  --sobre-tinta-on-accent:    #071637;
  --sobre-tinta-marca:        #9db8f2;

  /* ── Radios: nada de redondeo burbuja ── */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-full: 999px;

  /* ── Espaciado, base 4 ── */
  --s-2xs: 2px; --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px;  --s-lg: 16px;
  --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px;

  /* ── Elevación. sh-3 es de hover y de portada, no de reposo ── */
  --sh-1: 0 1px 2px rgba(20, 32, 31, .05);
  --sh-2: 0 4px 12px rgba(20, 32, 31, .08);
  --sh-3: 0 14px 34px rgba(20, 32, 31, .13), 0 3px 10px rgba(20, 32, 31, .07);

  /* ── Foco siempre visible ── */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  /* ── Velocidad = confianza. Tres valores, no cuatro ── */
  --t-micro: 90ms;  --t-short: 170ms;  --t-medium: 280ms;

  /* ── Tipografía: capa familia. General Sans sólo en 500 y 600 ── */
  --font-title: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-ui:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  /* Lo que cambia de forma entre temas también es un token. */
  --ver-sol:  block;
  --ver-luna: none;
  --ventana-borde: var(--line);
}

/* ── Tema oscuro ──
   Los mismos valores van dos veces a propósito: un selector no puede cubrir
   "sistema oscuro sin elección" y "elección oscura" a la vez. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0b1211; --surface: #141f1e; --surface-2: #1c2a28; --surface-3: #253634;
    --line: #2a3b39; --line-strong: #3a4c4a;
    --ink: #e9efed; --ink-2: #cbd6d4; --muted: #93a3a1; --muted-2: #8b9c99;

    --marca: #4a78e6; --grupo-logo: #4a78e6; --marca-suave: #152341; --marca-linea: #2a4170;
    --marca-fuerte: #9db8f2; --marca-rotulo: #9db8f2;
    --accent: #6f97ec; --accent-hover: #8fb0f2; --accent-tint: #14213d;
    --accent-line: #253c6b; --on-accent: #071637; --accent-ink: #9db8f2;

    --inmo: #e08a58; --inmo-hover: #f0a377; --inmo-tint: #33231a; --inmo-line: #5c3d2a;
    --inmo-ink: #f0a377; --on-inmo: #2a1206; --inmo-logo: #e08a58;
    --med: #4fa9b1; --med-hover: #6cbcc3; --med-tint: #12312f; --med-line: #1e4c4e;
    --med-ink: #6cbcc3; --on-med: #06201f; --med-logo: #2f9aa4;
    --shop: #e8695c; --shop-hover: #f0928a; --shop-tint: #2f1614; --shop-line: #5c2a25;
    --shop-ink: #f0928a; --on-shop: #2a0b08; --shop-logo: #e0493f;
    --sports: #5dbb88; --sports-hover: #7ccb9f; --sports-tint: #12301f; --sports-line: #1f4a32;
    --sports-ink: #8ad4aa; --on-sports: #062012; --sports-logo: #3f9a66;

    --success-tint: #14302a; --success-line: #24493f; --success-ink: #7fd1a8;
    --warning-tint: #2e2410; --warning-line: #4d3d1c; --warning-ink: #e6b865;
    --danger-tint:  #2f1614; --danger-line:  #5c2a25; --danger-ink:  #f0928a;

    --tinta: #0b1829; --tinta-2: #0f1f35; --tinta-3: #162b48;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 4px 12px rgba(0, 0, 0, .45);
    --sh-3: 0 14px 34px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .35);

    --ver-sol: none; --ver-luna: block;
    --ventana-borde: var(--tinta-linea-2);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b1211; --surface: #141f1e; --surface-2: #1c2a28; --surface-3: #253634;
  --line: #2a3b39; --line-strong: #3a4c4a;
  --ink: #e9efed; --ink-2: #cbd6d4; --muted: #93a3a1; --muted-2: #8b9c99;

  --marca: #4a78e6; --grupo-logo: #4a78e6; --marca-suave: #152341; --marca-linea: #2a4170;
  --marca-fuerte: #9db8f2; --marca-rotulo: #9db8f2;
  --accent: #6f97ec; --accent-hover: #8fb0f2; --accent-tint: #14213d;
  --accent-line: #253c6b; --on-accent: #071637; --accent-ink: #9db8f2;

  --inmo: #e08a58; --inmo-hover: #f0a377; --inmo-tint: #33231a; --inmo-line: #5c3d2a;
  --inmo-ink: #f0a377; --on-inmo: #2a1206; --inmo-logo: #e08a58;
  --med: #4fa9b1; --med-hover: #6cbcc3; --med-tint: #12312f; --med-line: #1e4c4e;
  --med-ink: #6cbcc3; --on-med: #06201f; --med-logo: #2f9aa4;
  --shop: #e8695c; --shop-hover: #f0928a; --shop-tint: #2f1614; --shop-line: #5c2a25;
  --shop-ink: #f0928a; --on-shop: #2a0b08; --shop-logo: #e0493f;
  --sports: #5dbb88; --sports-hover: #7ccb9f; --sports-tint: #12301f; --sports-line: #1f4a32;
  --sports-ink: #8ad4aa; --on-sports: #062012; --sports-logo: #3f9a66;

  --success-tint: #14302a; --success-line: #24493f; --success-ink: #7fd1a8;
  --warning-tint: #2e2410; --warning-line: #4d3d1c; --warning-ink: #e6b865;
  --danger-tint:  #2f1614; --danger-line:  #5c2a25; --danger-ink:  #f0928a;

  --tinta: #0b1829; --tinta-2: #0f1f35; --tinta-3: #162b48;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 4px 12px rgba(0, 0, 0, .45);
  --sh-3: 0 14px 34px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .35);

  --ver-sol: none; --ver-luna: block;
  --ventana-borde: var(--tinta-linea-2);
}

/* ── El scope de producto ──
   Donde aparezca un producto —una pestaña, una tarjeta, una página entera—
   cambian el acento y el color del isotipo, y nada más. */
[data-rubro='inmo'] {
  --accent: var(--inmo); --accent-hover: var(--inmo-hover); --accent-tint: var(--inmo-tint);
  --accent-line: var(--inmo-line); --accent-ink: var(--inmo-ink); --on-accent: var(--on-inmo);
  --logo: var(--inmo-logo); --rubro-claro: var(--inmo-claro);
}
[data-rubro='med'] {
  --accent: var(--med); --accent-hover: var(--med-hover); --accent-tint: var(--med-tint);
  --accent-line: var(--med-line); --accent-ink: var(--med-ink); --on-accent: var(--on-med);
  --logo: var(--med-logo); --rubro-claro: var(--med-claro);
}
[data-rubro='shop'] {
  --accent: var(--shop); --accent-hover: var(--shop-hover); --accent-tint: var(--shop-tint);
  --accent-line: var(--shop-line); --accent-ink: var(--shop-ink); --on-accent: var(--on-shop);
  --logo: var(--shop-logo); --rubro-claro: var(--shop-claro);
}
[data-rubro='sports'] {
  --accent: var(--sports); --accent-hover: var(--sports-hover); --accent-tint: var(--sports-tint);
  --accent-line: var(--sports-line); --accent-ink: var(--sports-ink); --on-accent: var(--on-sports);
  --logo: var(--sports-logo); --rubro-claro: var(--sports-claro);
}
[data-rubro] { --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }

/* ── La página entera de un producto ──
   La firma pasa a ser el color del producto, y la tinta del hero rota a su
   matiz: la misma luminosidad que el azul noche de la portada. */
.pagina[data-rubro] {
  --marca: var(--logo);
  --marca-suave: var(--accent-tint);
  --marca-linea: var(--accent-line);
  --marca-fuerte: var(--accent-ink);
  --marca-rotulo: var(--accent-ink);
  --sobre-tinta-marca: var(--rubro-claro);
  --sobre-tinta-accent: var(--rubro-claro);
  --sobre-tinta-accent-hover: color-mix(in srgb, var(--rubro-claro) 72%, #ffffff);
}
/* INMO va sobre un grafito casi sin matiz: el naranja es de firma y en un
   fondo café se volvía todo tierra. Neutro y quieto, que es lo que pide
   "exacto". */
.pagina[data-rubro='inmo'] {
  --tinta: #1c1d1d; --tinta-2: #232525; --tinta-3: #2d2f2f;
  --sobre-tinta: #efedeb; --sobre-tinta-2: #a8a6a3; --sobre-tinta-on-accent: #2a1206;
}
.pagina[data-rubro='med'] {
  --tinta: #0e2a2d; --tinta-2: #123033; --tinta-3: #1a4144;
  --sobre-tinta: #e9efed; --sobre-tinta-2: #93a3a1; --sobre-tinta-on-accent: #06201f;
}
.pagina[data-rubro='shop'] {
  --tinta: #2a1413; --tinta-2: #331a18; --tinta-3: #43221f;
  --sobre-tinta: #f3ebea; --sobre-tinta-2: #b8a29e; --sobre-tinta-on-accent: #2a0b08;
}
.pagina[data-rubro='sports'] {
  --tinta: #0d2a1b; --tinta-2: #113322; --tinta-3: #19422d;
  --sobre-tinta: #e8f0eb; --sobre-tinta-2: #97aa9e; --sobre-tinta-on-accent: #062012;
}