/* ============================================================================
   Tu Vecino Friki — Tokens de diseno
   Fuente unica de verdad para color, espacio, tipografia, formas y movimiento.

   Se carga ANTES que cualquier otra hoja del tema. Nada mas debe declarar
   :root. Si un valor no esta aqui, no deberia existir en el resto del CSS.

   Contraste: todos los colores de texto se han medido contra las tres
   superficies oscuras y cumplen WCAG AA (4.5:1 para cuerpo). Los ratios
   reales van anotados al lado de cada token.
   ============================================================================ */

:root {
  /* --- Superficies -------------------------------------------------------
     Neutros oscuros con un punto calido hacia el rojo de marca, para que el
     fondo no se lea como gris frio. Sin degradados: la estructura la dan los
     bordes, no las manchas de color. */
  --sup-fondo: #0b0909;   /* fondo de pagina */
  --sup-1: #141011;       /* superficie base: paneles, tarjetas */
  --sup-2: #1c1719;       /* elevada: resumen del pedido, desplegables */
  --sup-3: #262022;       /* maxima: hover, fila activa, campos */
  --sup-imagen: #f4f4f5;  /* fondo neutro para fotos de producto (no beige) */

  /* Bordes: son los que dan sensacion de objeto solido. */
  --borde-sutil: rgba(255, 255, 255, 0.07);
  --borde: rgba(255, 255, 255, 0.13);
  --borde-fuerte: rgba(255, 255, 255, 0.22);

  /* --- Texto -------------------------------------------------------------
     Ratios medidos sobre --sup-1 / --sup-2 / --sup-3 */
  --texto: #f4f0f0;        /* 16.70 / 15.66 / 14.15 */
  --texto-suave: #bfb6b8;  /*  9.53 /  8.94 /  8.08 */
  --texto-tenue: #9a9093;  /*  6.10 /  5.72 /  5.17 */
  --texto-inverso: #17110f;
  /* Solo para estados deshabilitados y adornos. NUNCA para texto que haya
     que leer: no llega a 4.5:1 y por eso esta marcado aparte. */
  --texto-deshabilitado: #6f6669;

  /* --- Marca -------------------------------------------------------------
     El rojo kitsune es la identidad. Se reserva para la accion principal y
     el paso actual: si se reparte por toda la pantalla deja de significar
     nada y suena a alarma. */
  --marca: #c20f2f;
  --marca-hover: #d61a3c;
  --marca-activa: #a80c28;
  /* El rojo de marca sobre fondo oscuro solo da 3.06:1, asi que NO vale como
     color de texto. Para texto y enlaces en rojo se usa esta version. */
  --marca-texto: #ec5470;  /* 5.46 / 5.12 / 4.63 sobre las superficies oscuras */
  /* Para el rojo sobre fondo CLARO (las secciones de papel de la portada) hace
     falta el contrario: el claro daria 3,15:1 sobre crema. */
  --marca-texto-claro: #a80c28;  /* 7.6:1 sobre #f4f4f5 */
  --marca-tenue: rgba(194, 15, 47, 0.14);
  --marca-borde: rgba(236, 84, 112, 0.38);
  /* Blanco sobre --marca da 6.17:1, de sobra para AA. */
  --sobre-marca: #ffffff;

  /* Oro: valor, ahorro, progreso, foco. Nunca compite con la accion. */
  --oro: #f2b84b;          /* 10.55 / 9.89 / 8.94 */
  --oro-tenue: rgba(242, 184, 75, 0.13);
  --oro-borde: rgba(242, 184, 75, 0.34);
  --sobre-oro: #17110f;    /* 10.44:1 */

  /* --- Estados -----------------------------------------------------------
     El error NO usa el rojo de marca: si el boton de comprar y el mensaje de
     error son del mismo rojo, no se distingue una accion de un fallo. */
  --exito: #4ade80;        /* 10.84 */
  --exito-tenue: rgba(74, 222, 128, 0.12);
  --aviso: #f2b84b;
  --aviso-tenue: rgba(242, 184, 75, 0.12);
  --error: #ff6b78;        /*  6.86 */
  --error-tenue: rgba(255, 107, 120, 0.12);
  --error-borde: rgba(255, 107, 120, 0.42);
  --info: #7aa7ff;         /*  7.91 */
  --info-tenue: rgba(122, 167, 255, 0.12);

  /* --- Espaciado ---------------------------------------------------------
     Escala de 4 px. Cualquier margen o relleno sale de aqui. */
  --e-0: 0;
  --e-1: 0.25rem;   /*  4 */
  --e-2: 0.5rem;    /*  8 */
  --e-3: 0.75rem;   /* 12 */
  --e-4: 1rem;      /* 16 */
  --e-5: 1.5rem;    /* 24 */
  --e-6: 2rem;      /* 32 */
  --e-7: 3rem;      /* 48 */
  --e-8: 4rem;      /* 64 */
  --e-9: 6rem;      /* 96 */

  /* --- Tipografia --------------------------------------------------------
     Dos familias. Inter carga toda la interfaz; el display es solo para
     momentos de marca (logo, heroe, titulos de seccion de la home).
     Orbitron se retira: era una fuente de display metida en datos y precios,
     que es justo lo que hace que una tienda parezca un panel de videojuego. */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-display: 'Cinzel Decorative', Georgia, serif;
  /* Noto Serif (latina) en vez de Noto Serif JP: el mismo dibujo para el
     alfabeto que usamos, a un tercio del peso. */
  --fuente-titulo: 'Noto Serif', Georgia, serif;

  /* Escala fija en rem, ratio ~1.2. En interfaz de producto la tipografia
     fluida estorba: el usuario mira siempre al mismo tamano de pantalla. */
  --t-xs: 0.75rem;      /* 12 */
  --t-sm: 0.8125rem;    /* 13 */
  --t-base: 0.9375rem;  /* 15 */
  --t-md: 1.0625rem;    /* 17 */
  --t-lg: 1.25rem;      /* 20 */
  --t-xl: 1.5rem;       /* 24 */
  --t-2xl: 1.875rem;    /* 30 */
  --t-3xl: 2.25rem;     /* 36 */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-negrita: 700;

  --alto-compacto: 1.25;
  --alto-normal: 1.55;
  --alto-holgado: 1.7;

  --tracking-titulo: -0.02em;
  --tracking-etiqueta: 0.06em;

  /* --- Formas ------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-redondo: 9999px;

  /* --- Sombras -----------------------------------------------------------
     Sombra de verdad, no resplandor. El glow rojo sobre fondo oscuro es lo
     que hacia que todo pareciese un boton de neon. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* --- Foco --------------------------------------------------------------
     Oro sobre cualquier superficie da 8.9:1 o mas. Visible sin discusion. */
  --foco: var(--oro);
  --foco-grosor: 2px;
  --foco-separacion: 2px;

  /* --- Capas -------------------------------------------------------------
     Escala semantica. Se acabaron el 9999 y el 60 conviviendo sin criterio. */
  --z-base: 0;
  --z-elevado: 10;
  --z-pegajoso: 100;
  --z-cabecera: 200;
  --z-flotante: 300;
  --z-panel: 400;
  --z-fondo-modal: 500;
  --z-modal: 600;
  --z-aviso: 700;
  --z-tooltip: 800;

  /* --- Movimiento --------------------------------------------------------
     150-250 ms en casi todo: el cliente esta comprando, no viendo una
     animacion. Curvas de salida exponenciales, sin rebote ni elastico. */
  --mov-rapido: 140ms;
  --mov-normal: 200ms;
  --mov-lento: 320ms;
  --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entrada: cubic-bezier(0.4, 0, 1, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Medidas ----------------------------------------------------------- */
  --alto-cabecera: 80px;
  --ancho-contenedor: 1280px;
  --ancho-lectura: 68ch;   /* longitud de linea comoda para prosa */
  --area-tactil: 44px;     /* minimo de zona pulsable en movil */

  /* ==========================================================================
     Variables propias de WooCommerce.

     WooCommerce pinta con sus propias custom properties, pensadas para un tema
     claro: --wc-subtext es #767676, que sobre nuestro fondo oscuro da 4,37:1 y
     se queda por debajo del minimo legible. Redefinirlas aqui tine de una vez
     todo lo que genera el plugin, incluido lo que inyecta por AJAX.
     ========================================================================== */
  --wc-subtext: var(--texto-tenue);
  --wc-content-bg: var(--sup-1);
  --wc-highlight: var(--marca-texto);
  --wc-highlight-text: var(--sobre-marca);
  --wc-highligh-text: var(--sobre-marca); /* la errata es del propio plugin */
  --wc-red: var(--error);
  --wc-green: var(--exito);
  --wc-blue: var(--info);
  --wc-orange: var(--oro);

  /* ==========================================================================
     Compatibilidad con los nombres antiguos.

     El tema tiene miles de reglas escritas con la nomenclatura anterior.
     Reapuntandolas aqui, todo el CSS existente adopta la paleta nueva sin
     tener que reescribirlo de golpe, y se puede ir migrando por pantallas.
     Segun avance el refactor, estos alias iran desapareciendo.
     ========================================================================== */
  --kitsune-red: var(--marca);
  --kitsune-crimson: var(--marca-activa);
  --ember: var(--marca-texto);
  --sun-gold: var(--oro);
  --jade: var(--exito);
  --indigo: var(--info);

  --obsidian: var(--sup-fondo);
  --void: var(--sup-fondo);
  --ash: var(--sup-1);
  --smoke: var(--sup-3);
  --ink: var(--texto-inverso);
  --ink-soft: var(--texto-inverso);
  --ghost: var(--texto);
  --white: #ffffff;

  /* --paper sigue siendo claro a proposito: lo usan las secciones claras de
     la home y los recuadros de miniaturas. Lo que se retira es el tinte
     beige, que era lo que chocaba con el resto. */
  --paper: var(--sup-imagen);
  --paper-deep: #e4e4e6;

  --font-display: var(--fuente-display);
  --font-heading: var(--fuente-titulo);
  --font-body: var(--fuente);
  /* Orbitron retirado: los acentos pasan a Inter. */
  --font-accent: var(--fuente);

  --header-height: var(--alto-cabecera);
  --container-max: var(--ancho-contenedor);

  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: var(--r-redondo);

  --shadow-sm: var(--sombra-1);
  --shadow-md: var(--sombra-2);
  --shadow-soft: var(--sombra-3);
  /* Los antiguos resplandores pasan a sombras normales para que las reglas
     que aun los invocan dejen de pintar neon. */
  --shadow-glow: var(--sombra-2);
  --shadow-glow-strong: var(--sombra-3);

  --transition-fast: var(--mov-rapido) var(--curva-salida);
  --transition-normal: var(--mov-normal) var(--curva-salida);
  --transition-slow: var(--mov-lento) var(--curva-salida);
}