/* PescaRadar · tokens del sistema de diseño.
 *
 * Un solo sitio donde viven color, espacio, radio, sombra y tipografía. Antes
 * los hex estaban copiados a mano en cada hoja, así que cambiar un azul
 * obligaba a buscarlo por todo el proyecto y siempre quedaba alguno distinto.
 *
 * Dirección: Ocean Dark. Azul océano muy oscuro de fondo, cian de radar como
 * acento. El brillo se usa con cuentagotas: esto es una herramienta para
 * decidir dónde pescar, no un videojuego.
 */

:root {
  /* ---- superficies -------------------------------------------------------
     Tres niveles y no más. Con cinco grises casi iguales nadie distingue la
     jerarquía y todo acaba pareciendo plano. */
  --pr-surface: #041016;
  --pr-surface-1: #071a23;
  --pr-surface-2: #0c2531;
  --pr-surface-glass: rgba(7, 26, 35, .82);
  --pr-scrim: rgba(2, 8, 12, .72);

  /* ---- texto -------------------------------------------------------------
     `primary` sobre `surface` da 15:1; `secondary` da 7:1. Los dos pasan AA
     con holgura, también sobre las tarjetas elevadas. */
  --pr-text: #e9f6fb;
  --pr-text-soft: #a3bcc7;
  --pr-text-faint: #6f8b97;

  --pr-border: rgba(120, 170, 190, .18);
  --pr-border-strong: rgba(120, 170, 190, .34);

  /* ---- marca -------------------------------------------------------------
     El cian del radar. `primary` es para acción; `accent` solo para detalles
     vivos, nunca para texto pequeño sobre oscuro. */
  --pr-primary: #35b6d8;
  --pr-primary-hover: #4fcaea;
  --pr-primary-ink: #032029;
  --pr-primary-soft: rgba(53, 182, 216, .14);
  --pr-accent: #38e0c4;

  /* Degradados de marca. Estaban copiados en la portada y en el perfil: al
     centralizarlos, cambiar el tono ya no deja uno de los dos desactualizado. */
  --pr-grad-nivel: linear-gradient(150deg, #10505f, #071f28);
  --pr-grad-mapa: linear-gradient(160deg, #0a2733, #061821);

  /* ---- semánticos --------------------------------------------------------- */
  --pr-success: #3fbd7a;
  --pr-warning: #e0a83c;
  --pr-danger: #e06172;
  --pr-info: #5aa9e6;

  /* ---- escala del score ---------------------------------------------------
     Cinco tramos. El color acompaña, nunca sustituye a la etiqueta: quien no
     distingue verde de ámbar tiene que poder leer "Muy bueno" igual. */
  --pr-score-excellent: #3fbd7a;
  --pr-score-great: #6cc06a;
  --pr-score-good: #d2b74a;
  --pr-score-fair: #e09a4c;
  --pr-score-low: #b07a86;

  /* ---- espaciado ---------------------------------------------------------- */
  --pr-1: 4px;
  --pr-2: 8px;
  --pr-3: 12px;
  --pr-4: 16px;
  --pr-6: 24px;
  --pr-8: 32px;
  --pr-12: 48px;
  --pr-16: 64px;

  /* ---- radios ------------------------------------------------------------- */
  --pr-r-chip: 999px;
  --pr-r-btn: 12px;
  --pr-r-card: 16px;
  --pr-r-sheet: 24px;

  /* ---- sombras -----------------------------------------------------------
     Sobre fondo oscuro una sombra pesada no separa: ensucia. Lo que separa es
     el borde superior claro. Las flotantes sobre el mapa sí necesitan cuerpo,
     porque compiten con la cartografía. */
  --pr-shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
  --pr-shadow-2: 0 4px 16px rgba(0, 0, 0, .38);
  --pr-shadow-float: 0 6px 24px rgba(0, 0, 0, .5);
  --pr-inset-top: inset 0 1px 0 rgba(255, 255, 255, .07);

  /* ---- tipografía ---------------------------------------------------------
     Nada por debajo de 12px como contenido. Los números de métricas usan cifras
     de ancho fijo para que no bailen al actualizarse. */
  --pr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pr-font-num: ui-monospace, "SF Mono", "Roboto Mono", monospace;

  --pr-display: 30px;
  --pr-h1: 25px;
  --pr-h2: 21px;
  --pr-h3: 18px;
  --pr-body: 15px;
  --pr-small: 13px;
  --pr-caption: 12px;

  /* ---- capas -------------------------------------------------------------
     Numeradas y con nombre. Sin esto acaban apareciendo z-index de 9999 que
     nadie sabe contra qué compiten. */
  --pr-z-map-control: 400;
  --pr-z-rail: 700;
  --pr-z-topbar: 720;
  --pr-z-bottomnav: 740;
  --pr-z-fab: 750;
  --pr-z-sheet: 900;
  --pr-z-modal: 950;
  --pr-z-toast: 990;

  /* ---- movimiento --------------------------------------------------------
     Corto y con propósito. Una transición de medio segundo se percibe como
     lentitud de la aplicación, no como elegancia. */
  --pr-fast: 120ms;
  --pr-base: 180ms;
  --pr-slow: 260ms;
  --pr-ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- alturas de la estructura ------------------------------------------ */
  --pr-topbar-h: 64px;
  --pr-bottomnav-h: 64px;
  --pr-rail-w: 116px;

  /* Zona segura: en iPhone la barra inferior queda bajo el indicador si no se
     reserva. Se resuelve una vez aquí y no en cada pantalla. */
  --pr-safe-top: env(safe-area-inset-top, 0px);
  --pr-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* En horizontal con recorte, sin estas dos el contenido se mete debajo del
     notch por el lateral. */
  --pr-safe-left: env(safe-area-inset-left, 0px);
  --pr-safe-right: env(safe-area-inset-right, 0px);
}

/* Quien pide menos movimiento lo pide en serio: puede ser por mareo o por
   migraña. Se desactiva de verdad, no se acorta. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}