/* =====================================================
   tokens.css — Design Tokens & Reset Global
   Mambo de Condenados | Ctapó Producciones
   Paleta extraída del pitch visual del juego
   ===================================================== */

/* ── Variables de color ── */
:root {
  /* Rojos y bordo del folklore */
  --color-ember:        #C0392B;   /* rojo brasa */
  --color-blood:        #8B1A1A;   /* sangre oscura */
  --color-mahogany:     #4A1010;   /* caoba profunda */
  --color-void:         #0D0000;   /* negro pampa */
  --color-ash:          #1A0A0A;   /* carbón */

  /* Dorados para acento */
  --color-gold:         #D4A015;   /* dorado viejo */
  --color-amber:        #E8720C;   /* ámbar naranja */
  --color-wheat:        #C8A96E;   /* trigo pampeano */

  /* Textos */
  --color-text-primary: #F5E8D0;   /* pergamino */
  --color-text-muted:   #A89070;   /* barro claro */
  --color-text-dim:     #6B5040;   /* tierra */

  /* Fondos de sección */
  --color-bg-dark:      #0D0000;
  --color-bg-card:      rgba(30, 5, 5, 0.85);
  --color-bg-glass:     rgba(139, 26, 26, 0.12);

  /* Bordes */
  --color-border:       rgba(208, 94, 14, 0.25);
  --color-border-glow:  rgba(212, 160, 21, 0.4);

  /* ── Tipografía ── */
  --font-display:       'Press Start 2P', monospace;   /* pixel art - título */
  --font-heading:       'Crimson Pro', serif;           /* clásico literario */
  --font-body:          'Libre Baskerville', serif;     /* cuerpo de texto */
  --font-ui:            'Space Mono', monospace;        /* detalles técnicos */

  /* Tamaños fluidos */
  --text-xs:    0.65rem;
  --text-sm:    0.8rem;
  --text-base:  1rem;
  --text-lg:    1.2rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.8rem;
  --text-4xl:   3.8rem;
  --text-hero:  clamp(2rem, 5vw, 5.5rem);

  /* ── Espaciado ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radios ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ── Sombras ── */
  --shadow-ember: 0 0 20px rgba(192, 57, 43, 0.4);
  --shadow-gold:  0 0 30px rgba(212, 160, 21, 0.3);
  --shadow-card:  0 8px 32px rgba(0,0,0,0.6);

  /* ── Transiciones ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --max-width: 1200px;
  --nav-height: 72px;
}

/* ── Reset Moderno ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-void);
  color: var(--color-text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  /* Textura de ruido sutil para efecto pergamino */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea { font: inherit; }

/* ── Utilidades globales ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Separador decorativo tipo hueso/guitarra */
.section-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-ember) 20%,
    var(--color-gold) 50%,
    var(--color-ember) 80%,
    transparent 100%);
  opacity: 0.5;
  margin-block: var(--space-4);
}