/* ============================================================
   TOKENS.CSS — Santiago FC · Design System v1.0
   Fuente: preset.json Agente 04 · 2026-06-12
   ============================================================ */

:root {
  /* --- Paleta principal --- */
  --color-negro:        #0A0A0A;
  --color-naranja:      #FF6B00;
  --color-ambar:        #FFB347;
  --color-blanco:       #FFFFFF;
  --color-gris-medio:   #B0B0B0;
  --color-gris-oscuro:  #1E1E1E;
  --color-gris-hueso:   #F0EDE8;
  --color-card:         #141414;
  --color-card-hover:   #1E1E1E;

  /* --- Estados --- */
  --color-gol:      #FF6B00;
  --color-victoria: #00C853;
  --color-derrota:  #D32F2F;
  --color-empate:   #B0B0B0;

  /* --- Tipografía --- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-hero:    clamp(3.2rem, 2rem + 5.5vw, 7.5rem);
  --text-h1:      clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --text-h2:      clamp(1.4rem, 0.9rem + 1.8vw, 2.2rem);
  --text-h3:      clamp(1.1rem, 0.85rem + 0.8vw, 1.5rem);
  --text-body:    clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
  --text-caption: clamp(0.7rem, 0.65rem + 0.15vw, 0.82rem);
  --text-label:   0.7rem;

  --lh-display: 0.95;
  --lh-title:   1.05;
  --lh-body:    1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.1em;

  /* --- Espaciado --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  --section-pad: clamp(40px, 5vw, 96px);
  --container:   1280px;
  --container-sm: 960px;

  /* --- Radios (angular = deportivo) --- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 9999px;

  /* --- Sombras --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.7);
  --shadow-naranja: 0 0 16px rgba(255,107,0,.4);
  --shadow-naranja-lg: 0 0 32px rgba(255,107,0,.6);

  /* --- Navbar --- */
  --nav-height: 68px;

  /* --- Animaciones --- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-exp: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-power2:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   600ms;
  --dur-reveal: 900ms;
  --dur-hero:   1100ms;
}

/* Dark base — always on */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background-color: var(--color-negro);
  color: var(--color-blanco);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

/* --- Utilidades rápidas --- */
.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 {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container-sm {
  max-width: var(--container-sm);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* --- Reduced-motion global --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}