/* Tokens de la landing del grupo BEMO.
   Fuente: los DESIGN.md de bemo-inmo, bemo-med, bemo-shop y bemo-sports.

   Esto es la CAPA FAMILIA de DESIGN.md §0 — la rampa de neutros, el espaciado,
   los radios, la tipografía y el movimiento — más la CAPA MARCA, que acá es
   protagonista: la landing del grupo es "la portada", y la portada es
   justamente uno de los tres lugares donde el naranja de marca puede firmar.

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

:root {
  /* ── Neutros de papel. El 95% de la pantalla ── */
  --bg:          #fbfbfa;
  --surface:     #ffffff;
  --surface-2:   #f5f3ee;
  /* Escalón de portada, no de app: el #efece5 del sistema da 1,18:1 contra una
     tarjeta blanca y a distancia de portada se lee plano. INMO ya resolvió esto
     redefiniendo ESTE ÚNICO token en el scope de su landing. Acá la landing es
     el sitio entero, así que el valor de portada es el valor global. */
  --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), no el #8a9694 de
     MED que mide 2,75:1 y falla AA. */
  --muted-2: #626d6b;

  /* ── Marca del grupo ──
     El naranja es color de FIRMA, no de interfaz. En las apps aparece sólo en
     el isotipo; acá, que es la portada del grupo, además tiñe el halo del hero
     y el rótulo de sección. Nunca es color de acción. */
  --marca:        #d2703f;
  --marca-suave:  #f6e7de;
  --marca-linea:  #ecc9b4;
  /* Como TEXTO, --marca da 3,43:1 sobre blanco. Esta variante mide 4,65. */
  --marca-fuerte: #b45c30;
  /* Y una tercera, medida, para el rótulo de sección.
     `--marca-fuerte` está calibrado contra BLANCO puro. Acá el rótulo cae sobre
     `--bg` (4,49) y sobre el `--surface-3` de portada (3,72): los dos por debajo
     de AA, y va a 11px. Mismo tono, luminancia bajada hasta pasar en el peor de
     los dos fondos: 5,53 sobre --bg y 4,58 sobre --surface-3. */
  --marca-rotulo: #9e512a;

  /* ── Acento: uno solo, el de tres de los cuatro productos ── */
  --accent:       #0e7c86;
  --accent-hover: #0b656d;
  --accent-tint:  #e1f1f2;
  --accent-line:  #bfe0e2;
  --on-accent:    #ffffff;
  /* Texto del acento sobre su propio tint: --accent sobre --accent-tint da
     4,25:1 y los chips van a 11,5px. Con éste, 5,83. */
  --accent-ink:   #0b656d;

  /* ── El acento propio de SHOP. Único producto que no adoptó el teal ──
     Vive acá y no en la tarjeta porque ningún componente define un color. */
  --shop:      #c8322a;
  --shop-tint: #fceae8;
  --shop-line: #f2c7c1;
  --shop-ink:  #9e241d;

  /* ── 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;

  /* ── Superficie oscura de portada ──
     No es paleta nueva: es la misma rampa de luminosidad con el hue rotado al
     acento. El #0b1211 del tema oscuro es un fondo de APP, hecho para
     desaparecer detrás de una tabla; de hero lee como negro y no como
     superficie. */
  --tinta:      #0e2a2d;
  --tinta-2:    #123033;
  --tinta-3:    #1a4144;
  --sobre-tinta:    #e9efed;
  --sobre-tinta-2:  #93a3a1;
  --tinta-linea:   rgba(255, 255, 255, .11);
  --tinta-linea-2: rgba(255, 255, 255, .22);
  /* Sobre tinta el teal #0e7c86 da 2,1:1 y no sirve como acción. La acción
     sobre superficie oscura es el acento en su versión clara, con texto oscuro
     encima. El naranja queda donde corresponde: el isotipo. */
  --sobre-tinta-accent:    #4fa9b1;
  --sobre-tinta-on-accent: #06201f;

  /* ── 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 rgba(14, 124, 134, .18);

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

  /* ── Tipografía: capa familia, idéntica en los cuatro productos ──
     Es lo que más hace que dos productos se lean como hermanos, más que el
     color. General Sans se carga SÓLO en 500 y 600: pedirle 400 hace que el
     navegador lo sintetice y sale peor que el 500. */
  --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;
}

[data-theme='dark'] {
  --marca:        #e08a58;
  --marca-suave:  #33231a;
  --marca-linea:  #5c3d2a;
  --marca-fuerte: #f0a377;
  /* En oscuro el naranja claro ya pasa en los tres fondos (el peor es 6,17
     sobre --surface-3): el rótulo no necesita un valor propio. */
  --marca-rotulo: #f0a377;

  --bg:          #0b1211;
  --surface:     #141f1e;
  --surface-2:   #1c2a28;
  /* En oscuro el escalón de la app ya separa bien (1,33:1): se devuelve el
     valor del sistema en vez de inventar otro. */
  --surface-3:   #253634;
  --line:        #2a3b39;
  --line-strong: #3a4c4a;

  --ink:     #e9efed;
  --ink-2:   #cbd6d4;
  --muted:   #93a3a1;
  --muted-2: #8b9c99;

  --accent:       #4fa9b1;
  --accent-hover: #6cbcc3;
  --accent-tint:  #12312f;
  --accent-line:  #1e4c4e;
  /* Oscuro, no blanco: un acento claro con texto blanco no contrasta. */
  --on-accent:    #06201f;
  --accent-ink:   #6cbcc3;

  --shop:      #e8695c;
  --shop-tint: #2f1614;
  --shop-line: #5c2a25;
  --shop-ink:  #f0928a;

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

  /* En oscuro el hero deja de ser una excepción: es la misma familia que el
     resto de la página, un escalón más honda. */
  --tinta:   #0a1c1e;
  --tinta-2: #102a2c;
  --tinta-3: #17393c;

  --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);

  --ring: 0 0 0 3px rgba(79, 169, 177, .22);
}