/* ============================================================
   AIRE COLOMBIANO — Design tokens v1.1
   Manual de marca · septiembre 2026 · dos familias: Fraunces + Hanken Grotesk
   Importar antes que cualquier otro CSS del e-commerce.
   ============================================================ */

:root {
  /* --- Paleta base (valores crudos, no usar directo en componentes) --- */
  --ac-indigo-900: #131E33; /* Índigo profundo — fondos oscuros */
  --ac-indigo:     #1C2B47; /* Índigo Crudo — color primario de marca */
  --ac-azul:       #4A6FA5; /* Azul Medio — el lavado más común del catálogo */
  --ac-azul-claro: #A9C6E0; /* Azul Claro — bordes, tintes, fondos suaves */
  --ac-azul-nube:  #E3EDF5; /* Tinte azul muy claro — fondos de sección */
  --ac-hilo:       #C07C1E; /* Hilo — el pespunte real del jean. Único acento */
  --ac-hilo-texto: #8A5510; /* Hilo oscurecido — versión legible como texto */
  --ac-hilo-claro: #E0A345; /* Hilo sobre fondo oscuro */
  --ac-arena:      #EAE0D2; /* Arena — el fondo real del estudio fotográfico */
  --ac-tiza:       #FAF6F0; /* Tiza — blanco cálido, superficie principal */
  --ac-carbon:     #141A26; /* Carbón con sesgo índigo — texto principal */
  --ac-gris:       #5A6274; /* Gris índigo — texto secundario */

  /* --- Estado (nunca usar Hilo para estado) --- */
  --ac-exito:      #2F6B4F; /* Disponible, pedido confirmado */
  --ac-aviso:      #A34A19; /* Últimas unidades, envío demorado */
  --ac-alerta:     #9B2226; /* Agotado, error de pago */

  /* --- Roles semánticos: TEMA CLARO (por defecto) --- */
  --ac-fondo:            var(--ac-tiza);
  --ac-fondo-alt:        var(--ac-arena);
  --ac-superficie:       #FFFFFF;
  --ac-superficie-hund:  #F2ECE3;
  --ac-texto:            var(--ac-carbon);
  --ac-texto-suave:      var(--ac-gris);
  --ac-texto-inverso:    var(--ac-tiza);
  --ac-borde:            #DCD2C4;
  --ac-borde-fuerte:     var(--ac-indigo);
  --ac-acento:           var(--ac-hilo);
  --ac-acento-texto:     var(--ac-hilo-texto);
  --ac-primario:         var(--ac-indigo);
  --ac-primario-hover:   var(--ac-indigo-900);
  --ac-foco:             var(--ac-azul);

  /* --- Tipografía --- */
  --ac-fuente-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ac-fuente-texto:   "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --ac-t-display-xl: 4rem;    /* 64px — portada */
  --ac-t-display-l:  2.75rem; /* 44px — título de página */
  --ac-t-titulo-1:   2rem;    /* 32px */
  --ac-t-titulo-2:   1.5rem;  /* 24px */
  --ac-t-titulo-3:   1.125rem;/* 18px */
  --ac-t-cuerpo:     1rem;    /* 16px */
  --ac-t-cuerpo-s:   0.875rem;/* 14px */
  --ac-t-etiqueta:   0.6875rem;/* 11px — etiqueta, mayúsculas, tracking .14em */

  /* --- Espaciado (base 4px) --- */
  --ac-e-1: 4px;   --ac-e-2: 8px;   --ac-e-3: 12px;  --ac-e-4: 16px;
  --ac-e-6: 24px;  --ac-e-8: 32px;  --ac-e-12: 48px; --ac-e-16: 64px;
  --ac-e-24: 96px;

  /* --- Forma --- */
  --ac-r-0:      0;                    /* foto de producto: nunca se redondea */
  --ac-r-s:      4px;                  /* inputs, chips, insignias */
  --ac-r-m:      10px;                 /* tarjetas, modales */
  --ac-r-arco:   4px 4px 4px 28px;     /* firma de marca: la curva del bolsillo */
  --ac-r-pildora: 999px;               /* selector de talla */

  /* --- Pespunte: el único divisor de la marca --- */
  --ac-pespunte: repeating-linear-gradient(
    to right,
    var(--ac-hilo) 0 7px,
    transparent 7px 13px
  );

  /* --- Sombra: una sola, discreta --- */
  --ac-sombra: 0 1px 2px rgba(20, 26, 38, .06), 0 8px 24px rgba(20, 26, 38, .07);

  /* --- Movimiento --- */
  --ac-transicion: 160ms cubic-bezier(.2, .6, .3, 1);
}

/* --- TEMA OSCURO por preferencia del sistema --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ac-fondo:           #101A2C;
    --ac-fondo-alt:       #16233A;
    --ac-superficie:      #1A2842;
    --ac-superficie-hund: #0C1424;
    --ac-texto:           #EFE7DB;
    --ac-texto-suave:     #A6B2C6;
    --ac-texto-inverso:   #101A2C;
    --ac-borde:           #2C3D5C;
    --ac-borde-fuerte:    var(--ac-azul-claro);
    --ac-acento:          var(--ac-hilo-claro);
    --ac-acento-texto:    var(--ac-hilo-claro);
    --ac-primario:        var(--ac-azul-claro);
    --ac-primario-hover:  #C3DAEC;
    --ac-foco:            var(--ac-hilo-claro);
    --ac-exito:           #6FBF95;
    --ac-aviso:           #E08A4A;
    --ac-alerta:          #E4757A;
    --ac-sombra:          0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

/* --- TEMA OSCURO explícito --- */
:root[data-theme="dark"] {
  --ac-fondo:           #101A2C;
  --ac-fondo-alt:       #16233A;
  --ac-superficie:      #1A2842;
  --ac-superficie-hund: #0C1424;
  --ac-texto:           #EFE7DB;
  --ac-texto-suave:     #A6B2C6;
  --ac-texto-inverso:   #101A2C;
  --ac-borde:           #2C3D5C;
  --ac-borde-fuerte:    var(--ac-azul-claro);
  --ac-acento:          var(--ac-hilo-claro);
  --ac-acento-texto:    var(--ac-hilo-claro);
  --ac-primario:        var(--ac-azul-claro);
  --ac-primario-hover:  #C3DAEC;
  --ac-foco:            var(--ac-hilo-claro);
  --ac-exito:           #6FBF95;
  --ac-aviso:           #E08A4A;
  --ac-alerta:          #E4757A;
  --ac-sombra:          0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}