/* =========================================================================
   TOKENS DE DISEÑO
   Todas las decisiones visuales de la plataforma viven acá: color,
   tipografía, espaciado, formas y sombras. Un tema (css/temas/*.css)
   redefine sólo estas variables; el resto de los estilos no se toca.

   Convenciones:
     --c-*    colores con nombre por función, no por tono.
     --rgb-*  los mismos colores en canales "R G B", para transparencias:
              rgb(var(--rgb-inv) / .7)
     --f-*    familias tipográficas · --t-* tamaños · --sp-* espaciado
     --radio-* esquinas · --sombra-* sombras
   ========================================================================= */
:root {
  /* ---- Color: marca ---- */
  --c-oscuro:           #0A1729;   /* principal oscuro — bandas, header, texto fuerte */
  --c-oscuro-2:         #10233D;   /* oscuro elevado */
  --c-oscuro-3:         #061020;   /* oscuro profundo (pie) */
  --c-secundario:       #1B4F9C;   /* enlaces, foco, datos destacados */
  --c-secundario-claro: #8FBDEA;
  --c-acento:           #F2B01E;   /* acción principal, riel, selección */
  --c-acento-hover:     #D2960C;   /* sólo fondos en hover */
  --c-acento-texto:     #7A5600;   /* acento legible como texto sobre claro (AA) */
  --c-sobre-acento:     var(--c-oscuro);   /* texto encima del acento */

  /* ---- Color: superficies y texto ---- */
  --c-fondo:            #F6F3EC;   /* fondo claro de página */
  --c-fondo-2:          #EDE8DC;
  --c-superficie:       #fff;      /* tarjetas, paneles, campos */
  --c-superficie-2:     #FBFAF7;
  --c-texto:            #14202F;
  --c-texto-2:          #56636F;   /* texto secundario */
  --c-texto-inv:        #fff;      /* texto sobre oscuro */
  --c-borde:            #DCD6C7;
  --c-borde-2:          #CFCBC0;
  --c-borde-3:          #BDB6A6;   /* butaca ocupada */
  --c-borde-inv:        rgba(255, 255, 255, .16);
  --c-deshabilitado:    #9AA2A9;
  --c-deshabilitado-2:  #8E969D;
  --c-deshabilitado-3:  #999;
  --c-negro:            #000;

  /* ---- Color: acento suave (avisos, selección sobre claro) ---- */
  --c-acento-suave:     #FFF6DC;
  --c-acento-suave-2:   #FFF4D6;
  --c-acento-suave-3:   #FFFBEF;
  --c-acento-suave-4:   #FFEFC2;
  --c-acento-borde:     #D9C48E;
  --c-acento-borde-2:   #A08A4E;

  /* ---- Color: estados ---- */
  --c-alerta:           #BC3030;
  --c-alerta-osc:       #962424;
  --c-alerta-osc-2:     #8E1F1F;
  --c-alerta-suave:     #FBE9E9;
  --c-alerta-suave-2:   #FFF6F6;
  --c-alerta-suave-3:   #FDF3F3;
  --c-alerta-borde:     #F0C9C9;
  --c-alerta-inv:       #FF9C9C;   /* alerta legible sobre oscuro */
  --c-alerta-inv-2:     #FF8A8A;
  --c-alerta-inv-3:     #FFB4B4;
  --c-alerta-inv-4:     #F08A8A;
  --c-alerta-inv-5:     #E27A7A;
  --c-exito:            #1F6B3A;
  --c-exito-claro:      #7FB08F;

  /* ---- Color: WhatsApp (marca de terceros, no cambia con el tema) ---- */
  --c-wa:               #25D366;
  --c-wa-hover:         #1EBE5B;
  --c-wa-texto:         #0B2E1A;

  /* ---- Canales para transparencias ---- */
  --rgb-inv:        255 255 255;   /* = --c-texto-inv */
  --rgb-oscuro:     10 23 41;      /* = --c-oscuro */
  --rgb-sombra:     6 16 32;       /* = --c-oscuro-3 */
  --rgb-acento:     242 176 30;    /* = --c-acento */
  --rgb-secundario: 27 79 156;     /* = --c-secundario */
  --rgb-texto:      20 32 47;      /* = --c-texto */
  --rgb-texto-2:    86 99 111;     /* = --c-texto-2 */
  --rgb-alerta:     188 48 48;     /* = --c-alerta */

  /* ---- Tipografía ---- */
  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    ui-monospace, "Cascadia Code", Consolas, monospace;

  --t-hero:  clamp(3.25rem, min(10.5vw, 13vh), 8.125rem);
  --t-xl:    clamp(3rem, 8.5vw, 7rem);
  --t-tit:   clamp(2.5rem, 6.6vw, 5.75rem);
  --t-md:    clamp(2.25rem, 5.2vw, 4.25rem);
  --t-h3:    clamp(1.15rem, 1.7vw, 1.5rem);
  --t-lead:  clamp(1rem, 1.15vw, 1.25rem);
  --t-base:  clamp(.9375rem, 1vw, 1.0625rem);
  --t-eti:   clamp(.5625rem, .78vw, .75rem);

  /* ---- Espaciado y medidas ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --sec-y:  clamp(4.5rem, 9.5vw, 9rem);
  --wrap:   1320px;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);

  /* ---- Formas ---- */
  --radio-control: 0;      /* campos */
  --radio-boton:   var(--radio-control);   /* botones */
  --radio-tarjeta: 0;      /* paneles, tarjetas, avisos */
  --radio-chip:    0;      /* etiquetas */
  --borde-fino:    1px;

  /* ---- Logo de la empresa ----
     Los define marcas/<id>/marca.css; acá quedan las medidas por defecto. */
  --logo-ancho: clamp(9.5rem, 14vw, 12.5rem);
  --logo-alto:  1.5rem;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Nombres anteriores ----
     Los usan admin/css/admin.css y css/dev.css hasta que migren. */
  --tinta:     var(--c-oscuro);
  --tinta-2:   var(--c-oscuro-2);
  --tinta-3:   var(--c-oscuro-3);
  --azul:      var(--c-secundario);
  --celeste:   var(--c-secundario-claro);
  --ambar:     var(--c-acento);
  --ambar-osc: var(--c-acento-hover);
  --ambar-txt: var(--c-acento-texto);
  --hueso:     var(--c-fondo);
  --hueso-2:   var(--c-fondo-2);
  --texto:     var(--c-texto);
  --texto-2:   var(--c-texto-2);
  --borde:     var(--c-borde);
  --borde-osc: var(--c-borde-inv);
  --alerta:    var(--c-alerta);
}