/* ==========================================================================
   HADA NAV v2 — menú superior (v9.34.0)
   --------------------------------------------------------------------------
   Referencia: starlink.com, medido el 2026-09-14.
     - Barra de 66 px, sin borde, transparente sobre el hero.
     - Enlaces en minúscula (no mayúsculas), 15-16 px, peso normal, junto al logo.
     - Controles en píldora translúcida (blanco al 20 %, radio 6 px).
     - Botones redondos de 32-36 px; el usuario es el último a la derecha.
     - En móvil solo quedan el logo y botones redondos.

   Marcado: template-parts/navbar.php · Comportamiento: assets/js/hada-nav.js

   Cinco hojas (≤ 800 líneas cada una), en este orden de carga:
     hada-nav-tokens.css  → tokens --hada-* (este archivo)
     hada-nav.css         → barra, enlaces, controles, avatar, insignias
     hada-nav-sub.css     → fila de búsqueda (escritorio) y cabecera opaca
     hada-nav-panels.css  → panel de cuenta y menú móvil a pantalla completa
     hada-nav-cats.css    → categorías: panel de escritorio y vista en el menú móvil

   Tokens propios con prefijo --hada-, sin tocar los --hik-* globales. El modo
   claro solo redefine tokens; ninguna regla de componente se duplica por modo.
   Movimiento: solo transform y opacity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — modo oscuro (por defecto)
   -------------------------------------------------------------------------- */
:root,
html[data-color-mode="dark"],
.hikvision-parking-page[data-color-mode="dark"] {
    --hada-bar-h: 66px;
    --hada-sub-h: 60px;   /* fila de búsqueda, arriba y solo en escritorio (v9.41.0: 52 → 60, ver hada-nav-sub.css) */
    --hada-header-h: calc(var(--hada-bar-h) + var(--hada-sub-h));
    --hada-pad-x: 24px;

    --hada-fg: #fafafa;
    --hada-fg-muted: rgba(250, 250, 250, 0.72);
    --hada-fg-subtle: rgba(250, 250, 250, 0.54);
    --hada-chip: rgba(255, 255, 255, 0.12);
    --hada-chip-hover: rgba(255, 255, 255, 0.2);
    --hada-line: rgba(255, 255, 255, 0.08);
    --hada-surface: #0f0f11;
    --hada-surface-hover: rgba(255, 255, 255, 0.06);
    --hada-avatar-bg: #2a2a2f;
    --hada-ring: #0b0b0c;

    /* Segunda fila y buscador */
    --hada-sub-bg: rgba(14, 14, 16, 0.72);
    --hada-field-bg: rgba(255, 255, 255, 0.08);
    --hada-field-ring: rgba(255, 255, 255, 0.18);

    /* Barra: capa de degradado en reposo y capa sólida al hacer scroll.
       --hada-bar-rest es la opacidad de la capa sólida en reposo. */
    --hada-bar-fade: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    --hada-bar-solid: rgba(9, 9, 11, 0.8);
    --hada-bar-rest: 0;

    --hada-scrim: rgba(0, 0, 0, 0.56);
    --hada-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 64px -16px rgba(0, 0, 0, 0.72);
    /* Sombra suave de los controles de la fila de arriba (v9.41.0). */
    --hada-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px -2px rgba(0, 0, 0, 0.45);

    /* Color de cada nivel: anillo del avatar y texto del chip de nivel.
       El chip lleva texto de 11 px, así que cada color debe dar ≥ 4,5:1 sobre
       su propio tinte (WCAG AA). Verificado con axe-core 4.10.2. */
    --hada-tier-installer: #b4bfcc;
    --hada-tier-silver: #cbd5e1;
    --hada-tier-gold: #e8b84a;
    --hada-tier-platinum: #b9c6dd;
    --hada-tier-diamond: #67e8f9;
    --hada-tier-public: #bdbdc4;
    --hada-tier-pending: #f59e0b;
    --hada-tier-staff: #8ec1fb;

    --hada-accent: var(--hik-primary, #e31937);
    --hada-accent-hover: #c8102e;

    --hada-radius-pill: 999px;   /* buscador, Categorías y botón de acción */
    --hada-radius-panel: 16px;
    --hada-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hada-dur: 260ms;
    --hada-dur-fast: 160ms;
}

/* --------------------------------------------------------------------------
   2. Tokens — modo claro
   El envoltorio más cercano manda: html claro con envoltorio oscuro = oscuro.
   -------------------------------------------------------------------------- */
html[data-color-mode="light"],
.hikvision-parking-page[data-color-mode="light"] {
    --hada-fg: #0b0b0c;
    --hada-fg-muted: rgba(11, 11, 12, 0.68);
    --hada-fg-subtle: rgba(11, 11, 12, 0.56);
    --hada-chip: rgba(0, 0, 0, 0.055);
    --hada-chip-hover: rgba(0, 0, 0, 0.1);
    --hada-line: rgba(0, 0, 0, 0.08);
    --hada-surface: #ffffff;
    --hada-surface-hover: rgba(0, 0, 0, 0.04);
    --hada-avatar-bg: #ececef;
    --hada-ring: #ffffff;

    --hada-sub-bg: rgba(255, 255, 255, 0.9);
    --hada-field-bg: #f1f1f3;
    --hada-field-ring: rgba(0, 0, 0, 0.16);

    --hada-bar-fade: none;
    --hada-bar-solid: rgba(255, 255, 255, 0.84);
    --hada-bar-rest: 1;

    --hada-scrim: rgba(0, 0, 0, 0.32);
    --hada-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 60px -18px rgba(0, 0, 0, 0.24);
    --hada-control-shadow: 0 1px 2px rgba(16, 20, 26, 0.06), 0 4px 14px -2px rgba(16, 20, 26, 0.12);

    --hada-tier-installer: #475569;
    --hada-tier-silver: #52525b;
    --hada-tier-gold: #7a4f08;
    --hada-tier-platinum: #4a5a7a;
    --hada-tier-diamond: #155e75;
    --hada-tier-public: #5f5f66;
    --hada-tier-pending: #92400e;
    --hada-tier-staff: #1d4ed8;

    --hada-accent-hover: #b50f2a;
}

/* Sin JavaScript no hay data-color-mode: se respeta la preferencia del sistema. */
@media (prefers-color-scheme: light) {
    html:not([data-color-mode]),
    .hikvision-parking-page[data-color-mode="auto"] {
        --hada-fg: #0b0b0c;
        --hada-fg-muted: rgba(11, 11, 12, 0.68);
        --hada-fg-subtle: rgba(11, 11, 12, 0.56);
        --hada-chip: rgba(0, 0, 0, 0.055);
        --hada-chip-hover: rgba(0, 0, 0, 0.1);
        --hada-line: rgba(0, 0, 0, 0.08);
        --hada-surface: #ffffff;
        --hada-surface-hover: rgba(0, 0, 0, 0.04);
        --hada-avatar-bg: #ececef;
        --hada-ring: #ffffff;
        --hada-sub-bg: rgba(255, 255, 255, 0.9);
        --hada-field-bg: #f1f1f3;
        --hada-field-ring: rgba(0, 0, 0, 0.16);
        --hada-bar-fade: none;
        --hada-bar-solid: rgba(255, 255, 255, 0.84);
        --hada-bar-rest: 1;
        --hada-scrim: rgba(0, 0, 0, 0.32);
        --hada-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 60px -18px rgba(0, 0, 0, 0.24);
        --hada-control-shadow: 0 1px 2px rgba(16, 20, 26, 0.06), 0 4px 14px -2px rgba(16, 20, 26, 0.12);
        --hada-tier-installer: #475569;
        --hada-tier-silver: #52525b;
        --hada-tier-gold: #7a4f08;
        --hada-tier-platinum: #4a5a7a;
        --hada-tier-diamond: #155e75;
        --hada-tier-public: #5f5f66;
        --hada-tier-pending: #92400e;
        --hada-tier-staff: #1d4ed8;
        --hada-accent-hover: #b50f2a;
    }
}

@media (max-width: 768px) {
    :root,
    html[data-color-mode],
    .hikvision-parking-page[data-color-mode] {
        --hada-bar-h: 60px;
        /* Móvil: una sola barra. Se redefinen juntas porque --hada-header-h
           se calcula en el elemento donde se declara. */
        --hada-sub-h: 0px;
        --hada-header-h: 60px;
        --hada-pad-x: 16px;
    }
}