/* =====================================================================
   core/ui/tokens.css — Sistema de diseño de la Notaría 24
   ---------------------------------------------------------------------
   Fuente única de verdad visual. Ningún módulo debe redefinir estos
   valores: solo los consume (var(--azul), var(--radio), etc.). Validado
   de forma interactiva antes de incorporarse aquí — ver docs/ARQUITECTURA.md.

   Regla de color: el azul es el acento PRIMARIO (navegación activa,
   botones, selección, foco). Naranja y verde son acentos SECUNDARIOS.
   Verde/ámbar/rojo son SEMÁNTICOS (positivo/advertencia/crítico) y no
   deben confundirse visualmente con el acento de marca — por eso el
   ámbar es más dorado y el azul de marca es un acento aparte, no un
   tono intermedio entre ambos.
   ===================================================================== */
:root{
  /* Marco exterior + lienzo del panel */
  --marco:#1D4FE0; --panel:#FFFFFF; --superficie:#FFFFFF;
  --texto:#161A2C; --gris-texto:#6B7280; --gris-borde:#E7EAF3;

  /* Azul = acento primario. Naranja y verde = acentos secundarios. */
  --azul:#1D4FE0; --azul-suave:#E6ECFD;
  --naranja:#EA580C; --naranja-suave:#FDE7D3;
  --verde:#3B7D1B; --ambar:#BA7517; --rojo:#A32D2D;

  --radio-sm:10px; --radio:16px; --radio-lg:22px;
  --fuente: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Superficie "glass": en claro son valores neutros (equivalen a una
     tarjeta blanca sólida sin blur, o sea el look de siempre); en oscuro
     se activa el efecto vidrio esmerilado real (ver bloques de abajo).
     Los componentes SIEMPRE consumen estas variables — nunca #fff ni
     rgba() sueltos — así el mismo CSS resuelve a "tarjeta sólida" en
     claro y a "panel translúcido con blur" en oscuro sin reglas por
     tema en cada módulo. */
  --glass-blur:0px;
  --glass-bg:var(--superficie);
  --glass-bg-hover:var(--azul-suave);
  --glass-border:var(--gris-borde);
  --glass-sombra:0 1px 2px rgba(20,25,50,.04);
  --marco-sombra:0 30px 70px rgba(10,20,60,.35);

  /* Franja de navegación: azul institucional sólido en los dos temas
     (= var(--marco)), para que siempre contraste con el panel de trabajo
     (var(--panel)/var(--superficie)) a su derecha. OJO: en claro
     --marco y --azul son el mismo color, así que los estados sobre la
     franja (hover/activo/chip del logo) NO deben usar var(--azul) como
     fondo — usan blanco translúcido, que funciona igual sin importar si
     --marco coincide con --azul o no. No depende del tema: una sola
     definición basta. */
  --sidebar-bg:var(--marco);
  --sidebar-texto:rgba(255,255,255,.72);
  --sidebar-texto-fuerte:#FFFFFF;
  --sidebar-hover:rgba(255,255,255,.10);
  --sidebar-activo:rgba(255,255,255,.18);
  --sidebar-borde:rgba(0,0,0,.15);
  --sidebar-sep:rgba(255,255,255,.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --marco:#0B1740; --panel:#12162A; --superficie:#1B2036;
    --texto:#EDEFFA; --gris-texto:#9FA6C0; --gris-borde: rgba(255,255,255,.08);
    --azul:#5B82FF; --azul-suave:#1E2650;
    --naranja:#FF8A4C; --naranja-suave:#3A2210;
    --verde:#5FCB6B; --ambar:#FFC24D; --rojo:#FF6B6B;

    --glass-blur:20px;
    --glass-bg:rgba(255,255,255,.06);
    --glass-bg-hover:rgba(255,255,255,.10);
    --glass-border:rgba(255,255,255,.10);
    --glass-sombra:0 20px 45px rgba(0,0,0,.35);
    --marco-sombra:0 20px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --marco:#0B1740; --panel:#12162A; --superficie:#1B2036;
  --texto:#EDEFFA; --gris-texto:#9FA6C0; --gris-borde: rgba(255,255,255,.08);
  --azul:#5B82FF; --azul-suave:#1E2650;
  --naranja:#FF8A4C; --naranja-suave:#3A2210;
  --verde:#5FCB6B; --ambar:#FFC24D; --rojo:#FF6B6B;

  --glass-blur:20px;
  --glass-bg:rgba(255,255,255,.06);
  --glass-bg-hover:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.10);
  --glass-sombra:0 20px 45px rgba(0,0,0,.35);
  --marco-sombra:0 20px 60px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --marco:#1D4FE0; --panel:#FFFFFF; --superficie:#FFFFFF;
  --texto:#161A2C; --gris-texto:#6B7280; --gris-borde:#E7EAF3;
  --azul:#1D4FE0; --azul-suave:#E6ECFD;
  --naranja:#EA580C; --naranja-suave:#FDE7D3;
  --verde:#3B7D1B; --ambar:#BA7517; --rojo:#A32D2D;

  --glass-blur:0px;
  --glass-bg:var(--superficie);
  --glass-bg-hover:var(--azul-suave);
  --glass-border:var(--gris-borde);
  --glass-sombra:0 1px 2px rgba(20,25,50,.04);
  --marco-sombra:0 30px 70px rgba(10,20,60,.35);
}