/*
 * Sistema de diseño de Bike Passport — la ÚNICA fuente de verdad del color,
 * el espaciado y la tipografía. Lo consumen la PWA de taller, la landing y el
 * widget embebido.
 *
 * ORIGEN DE LOS COLORES. La marca es **navy + turquesa**, como el logotipo de
 * We Like Bikes: fondo navy #021530, palabra en blanco, bicicleta en turquesa
 * #13BABC. Bike Passport es otra empresa, así que no se copia la marca: se
 * hereda la familia.
 *
 * EL ROJO DE MARCA (#FF0035) NO SE USA. Ni en botones, ni en enlaces, ni en
 * degradados, ni en iconos, ni en la landing. La paleta de marca son dos
 * colores y nada más.
 *
 * Queda UN rojo, y solo para dos cosas: **bici denunciada como robada** y
 * **cadena de historial alterada**. No es el rojo de We Like Bikes: es un tono
 * funcional, más oscuro y menos saturado, que se lee como una señal de alto y
 * no como identidad. Si desapareciera también ese, el aviso de robo tendría que
 * competir con el ámbar de «dato sin verificar» y dejaría de parar a nadie —
 * que es justo lo que un aviso de robo tiene que hacer (§935 BGB: no hay
 * adquisición de buena fe de un bien robado).
 */

:root {
  /* ---------------------------------------------------------------------
   * Marca
   * ------------------------------------------------------------------- */
  --bp-navy-900: #021530;   /* el fondo oscuro de la marca */
  --bp-navy-800: #07203f;
  --bp-navy-700: #0d2d52;
  --bp-navy-600: #163d69;
  --bp-navy-100: #dbe5f2;   /* navy muy claro: fondos de sección, chips neutros */
  --bp-navy-50:  #eef3fa;

  --bp-teal-600: #0e8f91;   /* primario oscuro — texto sobre claro */
  --bp-teal-500: #13babc;   /* PRIMARIO. El turquesa de We Like Bikes */
  --bp-teal-400: #3fd0d2;
  --bp-teal-50:  #e7fafa;

  /* Rojo FUNCIONAL, no de marca. Solo robo y manipulación de la cadena.
     Deliberadamente desaturado respecto al #FF0035 de We Like Bikes para que
     nadie lo confunda con identidad ni le apetezca usarlo de acento. */
  --bp-stop-700: #8f1d2c;
  --bp-stop-600: #a8283a;
  --bp-stop-50:  #fbecee;

  --bp-amber-500: #f0a500;  /* atención: dato sin verificar, contrato por vencer */
  --bp-amber-50:  #fff6e0;

  --bp-green-600: #0e7a43;  /* confirmado, verificado, cadena íntegra */
  --bp-green-50:  #e6f6ed;

  /* ---------------------------------------------------------------------
   * Neutros
   * ------------------------------------------------------------------- */
  --bp-n-0:   #ffffff;
  --bp-n-50:  #f7f8fa;
  --bp-n-100: #eef0f4;
  --bp-n-200: #dfe3ea;
  --bp-n-300: #c4cbd6;
  --bp-n-500: #5d6778;   /* 4.5:1 sobre --bp-bg: el mínimo AA para texto normal */
  --bp-n-700: #3a4454;
  --bp-n-900: #151c28;

  /* ---------------------------------------------------------------------
   * Roles semánticos — en la app se usan ESTOS, nunca los de arriba
   * ------------------------------------------------------------------- */
  --bp-bg:            var(--bp-n-50);
  --bp-surface:       var(--bp-n-0);
  --bp-surface-sunk:  var(--bp-n-100);
  --bp-border:        var(--bp-n-200);
  --bp-text:          var(--bp-n-900);
  --bp-text-muted:    var(--bp-n-500);
  --bp-text-invert:   var(--bp-n-0);

  --bp-primary:       var(--bp-teal-500);
  --bp-primary-hover: var(--bp-teal-600);
  --bp-primary-text:  #00232a;          /* sobre turquesa, negro-verdoso: contraste 8.9:1 */

  --bp-danger:        var(--bp-stop-600);   /* SOLO robo y cadena alterada */
  --bp-warn:          var(--bp-amber-500);
  --bp-ok:            var(--bp-green-600);

  /* ---------------------------------------------------------------------
   * Tipografía — de sistema, sin fuentes externas
   * ------------------------------------------------------------------- */
  /* Ninguna fuente de Google: la CSP del widget no las permite, y una tablet de
   * taller con wifi malo no debe esperar a un CDN para pintar texto. */
  --bp-font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bp-font-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', monospace;

  /* Escala 1.25. El cuerpo es 16px y NO baja: lo lee alguien de pie, con la
   * tablet a medio metro y a veces con guantes. */
  --bp-text-xs:  12px;
  --bp-text-sm:  14px;
  --bp-text-md:  16px;
  --bp-text-lg:  20px;
  --bp-text-xl:  25px;
  --bp-text-2xl: 31px;
  --bp-text-3xl: 39px;

  /* ---------------------------------------------------------------------
   * Espaciado, radios, sombras
   * ------------------------------------------------------------------- */
  --bp-space-1: 4px;
  --bp-space-2: 8px;
  --bp-space-3: 12px;
  --bp-space-4: 16px;
  --bp-space-5: 24px;
  --bp-space-6: 32px;
  --bp-space-7: 48px;
  --bp-space-8: 64px;

  --bp-radius-sm: 6px;
  --bp-radius:    10px;
  --bp-radius-lg: 16px;
  --bp-radius-full: 999px;

  --bp-shadow-sm: 0 1px 2px rgb(2 21 48 / 0.06);
  --bp-shadow:    0 2px 8px rgb(2 21 48 / 0.08);
  --bp-shadow-lg: 0 12px 32px rgb(2 21 48 / 0.14);

  /* El objetivo táctil mínimo. No es una sugerencia: es un dedo con guante. */
  --bp-touch: 48px;

  --bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bp-dur-fast: 120ms;
  --bp-dur: 220ms;
}

/* Tema oscuro: el taller a las 7 de la mañana en invierno con la persiana medio
   bajada existe, y la tablet suele estar en automático. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bp-bg:           var(--bp-navy-900);
    --bp-surface:      var(--bp-navy-800);
    --bp-surface-sunk: var(--bp-navy-700);
    --bp-border:       #1b3455;
    --bp-text:         #e8edf5;
    --bp-text-muted:   #93a1b8;
    --bp-primary:      var(--bp-teal-400);
    --bp-primary-text: #00232a;
    --bp-ok:           #4ade80;
  }
}

[data-theme='dark'] {
  --bp-bg:           var(--bp-navy-900);
  --bp-surface:      var(--bp-navy-800);
  --bp-surface-sunk: var(--bp-navy-700);
  --bp-border:       #1b3455;
  --bp-text:         #e8edf5;
  --bp-text-muted:   #93a1b8;
  --bp-primary:      var(--bp-teal-400);
  --bp-primary-text: #00232a;
  --bp-ok:           #4ade80;
}

/* Quien pide menos movimiento no debería ver ninguno. Vale también para las
   animaciones de scroll de la landing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}