/* =======================================================================
   Pluma de Quetzal — tokens.css
   Paleta, tipografía, espaciado y temas claro/oscuro derivados del
   handoff de diseño mobile-first (design_handoff_pluma_quetzal).
   Todas las variables van prefijadas --pq-* para no chocar con las
   variables heredadas de style.css mientras se migra página por página.
   ======================================================================= */

:root,
[data-theme="light"] {
  /* Paleta cruda */
  --pq-guinda-profundo: #5A1029;
  --pq-guinda:          #7B1E3A;
  --pq-guinda-vivo:     #A0274D;
  --pq-verde-quetzal:   #1A7A42;
  --pq-verde-brillante: #22A659;
  --pq-amarillo:        #F2C94C;
  --pq-negro:           #1A1117;
  --pq-crema:           #FFF9F0;
  --pq-crema-profunda:  #F5EDE0;

  /* Semánticos — modo claro */
  --pq-bg:            var(--pq-crema);
  --pq-surface:       var(--pq-crema-profunda);
  --pq-surface-alt:   #eee3cf;
  --pq-text:          var(--pq-negro);
  --pq-text-soft:     rgba(26,17,23,0.82);
  --pq-text-muted:    rgba(26,17,23,0.60);
  --pq-rule:          rgba(26,17,23,0.14);
  --pq-rule-strong:   rgba(26,17,23,0.35);
  --pq-accent:        var(--pq-amarillo);
  --pq-accent-2:      var(--pq-verde-quetzal);
  --pq-inverso-bg:    var(--pq-negro);
  --pq-inverso-text:  var(--pq-crema);

  /* Pilares (color por pilar) — nombres de slug reales del backend */
  --pq-pilar-justicia: var(--pq-guinda);
  --pq-pilar-trabajo:  var(--pq-guinda);
  --pq-pilar-tierra:   var(--pq-verde-quetzal);
  --pq-pilar-poder:    var(--pq-amarillo);

  /* Tipografía */
  --pq-font-logo:    "Noto Serif Display", Georgia, "Times New Roman", serif;
  --pq-font-titular: "Anton", "Oswald", Impact, "Helvetica Neue", sans-serif;
  --pq-font-lead:    "Lora", Georgia, "Times New Roman", serif;
  --pq-font-body:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* Espacio (múltiplos de 4) */
  --pq-s-1:  4px;
  --pq-s-2:  8px;
  --pq-s-3:  12px;
  --pq-s-4:  16px;
  --pq-s-5:  20px;
  --pq-s-6:  24px;
  --pq-s-7:  32px;
  --pq-s-8:  40px;
  --pq-s-10: 56px;
  --pq-s-14: 80px;
  --pq-gutter: 14px;

  /* Tamaños utilitarios del shell */
  --pq-topbar-h:   28px;
  --pq-ticker-h:   36px;
  --pq-header-py:  12px;

  /* Focus ring consistente */
  --pq-focus: var(--pq-amarillo);
}

[data-theme="dark"] {
  --pq-bg:            var(--pq-guinda-profundo);
  --pq-surface:       var(--pq-negro);
  --pq-surface-alt:   #3a0a1a;
  --pq-text:          var(--pq-crema);
  --pq-text-soft:     rgba(255,249,240,0.78);
  --pq-text-muted:    rgba(255,249,240,0.55);
  --pq-rule:          rgba(255,249,240,0.15);
  --pq-rule-strong:   rgba(255,249,240,0.40);
  --pq-accent:        var(--pq-amarillo);
  --pq-accent-2:      var(--pq-verde-brillante);
  --pq-inverso-bg:    var(--pq-crema);
  --pq-inverso-text:  var(--pq-negro);

  --pq-pilar-justicia: var(--pq-guinda-vivo);
  --pq-pilar-trabajo:  var(--pq-guinda-vivo);
  --pq-pilar-tierra:   var(--pq-verde-brillante);
  --pq-pilar-poder:    var(--pq-amarillo);
}

/* Ticker de urgencia: scroll horizontal infinito */
@keyframes pq-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Overlay del menú hamburguesa */
@keyframes pq-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Skeleton de carga (1.2s, opacity 0.4 ↔ 0.8) */
@keyframes pq-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

/* Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}