/* Tokens de diseño de Oceanaria.
   Todo color, tipografía, espaciado, radio y sombra del resto de hojas sale de aquí. Al final, el tema oscuro. */

@layer tokens {
  :root {
    color-scheme: light;

    /* Color */
    --color-acento: #ffa33e;
    --color-acento-oscuro: #ff9725;
    --color-acento-vivo: #ffa500;
    --color-acento-texto: #b05a00;        /* naranja para texto pequeño sobre claro (AA) */
    --color-acento-texto-hondo: #8a4600;
    --color-texto: #000;
    --color-texto-sobre-color: #000;      /* sobre el naranja y el semáforo, en los dos temas */
    --color-texto-suave: #63666c;
    --color-texto-invertido: #fff;
    --color-fondo: #fff;
    --color-fondo-suave: #f8f9fa;
    --color-borde: #dee2e6;
    --color-velo: rgb(0 0 0 / 0.3);
    --color-velo-fuerte: rgb(0 0 0 / 0.55);
    --color-marino: #003366;              /* texto, líneas e iconos en azul marino */
    --color-marino-fondo: #003366;        /* superficies azul marino con texto blanco encima */
    --color-pie: #003366;
    --color-avatar: #e8f0f8;              /* el círculo de los pingüinos del equipo */
    --color-rumbo: #2d78e5;
    --marca-regular: #ffcc95;             /* rayitas bajo los valores no favorables, iguales en los dos temas */
    --marca-malo: #e4572e;                /* el rojo anaranjado del semáforo: destaca en los dos temas */
    --regla-aceptable: color-mix(in srgb, var(--mapa-regular) 55%, var(--color-fondo));  /* zonas de «Qué afecta» */
    --regla-fuera: color-mix(in srgb, var(--mapa-malo) 22%, var(--color-fondo));
    --color-punto-carrusel: rgb(255 255 255 / 0.5);

    /* Avisos (sin ningún dato, formulario enviado) */
    --estado-error: #c62828;
    --estado-exito: #226807;

    /* Mapas interactivos: semáforo de condiciones y colores de bandera */
    --mapa-bueno: #1a9e8f;
    --mapa-regular: #e9b949;
    --mapa-naranja: #ef8a3c;
    --mapa-malo: #e4572e;
    --mapa-sin-dato: #b0b7bf;
    --mapa-frio: #3b82c4;
    --mapa-templado: #e9b949;
    --mapa-calido: #ef8a3c;
    --mapa-humedad-baja: #9fd3e6;
    --mapa-humedad-media: #3b9ac4;
    --mapa-humedad-alta: #1f4e8c;
    --corrientes-medusa: #e0457b;
    --bandera-verde: #2e9e4f;
    --bandera-amarilla: #e9b949;
    --bandera-roja: #e4572e;
    --bandera-negra: #1d2329;
    --bandera-azul: #2f6fd6;
    /* Ficha de la playa: la máxima y la línea del viento en la gráfica del día */
    --dato-maxima: #c2410c;
    --dato-viento: #4f7cac;
    --color-seleccion-suave: #fff4e6;
    --color-rotulo: rgb(255 255 255 / 0.9);

    /* Tipografía */
    --fuente-texto: "Open Sans", Arial, sans-serif;
    --fuente-script: "Pinyon Script", cursive;
    --paso--1: 0.8125rem;                                   /* 13px */
    --paso-0: 0.9375rem;                                    /* 15px, texto */
    --paso-1: 1.125rem;                                     /* 18px */
    --paso-2: clamp(1.125rem, 0.95rem + 0.8vw, 1.75rem);    /* 18 → 28px, h3 */
    --paso-3: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);       /* 24 → 36px, h2 de sección */
    --paso-4: clamp(1.25rem, 0.4rem + 3.6vw, 3.125rem);     /* 20 → 50px, titular de cabecera */
    --paso-5: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);          /* 40 → 80px, Pinyon de cabecera */
    --interlineado: 1.6;
    --interlineado-titulo: 1.5;

    /* Espacio */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.25rem;
    --espacio-6: 2rem;
    --espacio-7: 3rem;
    --espacio-8: clamp(3rem, 1.5rem + 6vw, 7rem);           /* ritmo vertical de sección */

    /* Forma */
    --radio-pequeno: 4px;
    --sombra: 0 4px 8px rgb(0 0 0 / 0.1);
    --sombra-barra: 0 1px 3px rgb(0 0 0 / 0.09);
    --sombra-barra-movil: 0 2px 10px rgb(0 0 0 / 0.1);
    --sombra-levantada: 0 8px 16px rgb(0 0 0 / 0.2);
    --sombra-video: 0 4px 8px rgb(0 0 0 / 0.2);
    --sombra-texto: 0 2px 12px rgb(0 0 0 / 0.35);          /* títulos sobre foto */
    --sombra-texto-barra: 0 1px 2px rgb(0 0 0 / 0.35);     /* enlaces de la barra sobre foto */

    /* Medidas */
    --ancho-contenido: 1140px;
    --margen-lateral: 16px;
    --alto-barra: 128px;
    --alto-barra-compacta: 64px;

    /* Movimiento */
    --transicion: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* La barra del sitio pasa al menú de móvil hasta 1080 px (antes no cabe entera): mismo corte en
     componentes/cabecera-sitio.css y en js/oceanaria/navegacion.js */
  @media (max-width: 1080px) {
    :root {
      --alto-barra: 56px;
      --alto-barra-compacta: 56px;
    }
  }

  /* Tema oscuro (data-tema="oscuro" en <html>, que pone static/js/oceanaria/tema.js): el mar de noche. No es la paleta
     clara invertida: superficies azul muy oscuro, textos claros, el azul marino de los textos pasa a blanco y el
     naranja de los textos, a naranja claro. El naranja de marca, el semáforo y los colores de los datos no cambian. */
  :root[data-tema="oscuro"] {
    color-scheme: dark;

    --color-texto: #e6ebf0;
    --color-texto-suave: #a3afbb;
    --color-fondo: #0f1821;
    --color-fondo-suave: #172330;
    --color-borde: #2b3a48;
    --color-marino: #e6ebf0;              /* el mismo blanco del texto: las cifras de las tablas se leen mejor */
    --color-marino-fondo: #24527f;
    --color-pie: #0a1219;
    --color-avatar: #2a4560;
    --color-acento-texto: #ffb468;
    --color-acento-texto-hondo: #ffcd94;
    --color-seleccion-suave: #33261a;
    --color-rumbo: #6ea8f2;
    --color-rotulo: rgb(15 24 33 / 0.88);
    --dato-maxima: #f39a5c;
    --dato-viento: #8db4dc;
    /* Las zonas de «Qué afecta», con más color: mezcladas con el fondo oscuro como en claro quedaban sucias */
    --regla-aceptable: color-mix(in srgb, var(--mapa-regular) 85%, var(--color-fondo));
    --regla-fuera: color-mix(in srgb, var(--mapa-malo) 50%, var(--color-fondo));

    --sombra: 0 4px 10px rgb(0 0 0 / 0.35);
    --sombra-levantada: 0 8px 18px rgb(0 0 0 / 0.5);
    --sombra-barra: 0 1px 3px rgb(0 0 0 / 0.4);
    --sombra-barra-movil: 0 2px 10px rgb(0 0 0 / 0.45);
  }
}