/* ========================================
   v5 design tokens — Clavalo
   Dark-first, warm grays + grass green accent.
   See docs/specs/payments-and-redesign.md (Track A).
   ======================================== */
:root {
  /* === Escala global ===
     ÚNICA perilla para agrandar/achicar TODA la app de una. El diseño
     usa px hardcodeado en casi todos lados (no hay escala rem), así que
     este `zoom` en body es la forma limpia de escalar fuente + layout
     en bloque. Subilo/bajalo acá y nada más. 1 = tamaño original. */
  --app-zoom: 1.05;

  /* === Surfaces === */
  --bg:           #1f2220;
  --bg-2:         #1a1d1b;
  --card:         #2a2e2b;
  --card-2:       #252827;
  --input:        #1a1d1b;

  /* === Foreground / text === */
  --ink-bright:   #ffffff;  /* blanco puro — headings importantes */
  --fg:           #ece8dc;
  --fg-2:         #b8b6ab;  /* secondary — body / labels */
  --fg-3:         #8a877c;  /* tertiary — tags / muted captions */

  /* === Lines / dividers === */
  --line:         rgba(236, 232, 220, 0.10);
  --line-strong:  rgba(236, 232, 220, 0.22);
  --cal:          rgba(236, 232, 220, 0.75);

  /* === Accent (teal marca Clavalo) === */
  --accent:       #0adbc6;
  --accent-2:     #06b6a4;
  --accent-ink:   #04211e;
  --accent-dim:   rgba(10, 219, 198, 0.14);

  /* === Tarjetas árbitro === */
  --amarilla:     #ffd23f;
  --amarilla-ink: #2a1e00;
  --roja:         #e63946;

  /* === Paper (zonas claras / tickets boletería) === */
  --paper:        #efe8dc;
  --paper-2:      #e2d7be;  /* deeper paper tone for gradients / shadow */
  --paper-ink:    #1a1a15;
  --paper-muted:  rgba(26, 26, 21, 0.55);

  /* === Boletería palette === */
  --ink:          var(--fg);   /* warm cream main text */
  --ink-soft:     #c8d6cd;     /* secondary text on dark/pitch backgrounds */
  --muted:        var(--fg-3); /* mono captions, tertiary */
  --coral:        #ff7866;     /* live / alert accent */
  --green-glow:   rgba(10, 219, 198, 0.4);

  /* Verde real (no el teal de marca) — pálpito EXACTO, para diferenciarlo
     del acierto de resultado/ganador que usa --accent. */
  --exacto:       #2fcf6a;
  --exacto-glow:  rgba(47, 207, 106, 0.4);

  /* === Paleta extendida (cielo · mar · cancha) === */
  /* El teal de marca (--accent) es el primario; estos colores son acentos
     secundarios para variar matices sin perder cohesión. */
  --sky:          #76bcf5;   /* azul cielo — info, links secundarios */
  --sky-soft:     #d3e9f0;   /* pale sky — fondos suaves */
  --slate:        #5889b2;   /* azul acero — secondary, bordes */
  --sage:         #bad996;   /* verde sage — fresh / nuevo */
  --peach:        #ff9d5c;   /* durazno cálido — acento elegible (reemplaza al coral, que queda reservado para estado live/alert) */
  --teal-soft:    #69d6cc;   /* aguamarina suave — variante del brand */
  --sky-dim:      rgba(118, 188, 245, 0.14);
  --sage-dim:     rgba(186, 217, 150, 0.14);
  --slate-dim:    rgba(88, 137, 178, 0.14);
  --peach-dim:    rgba(255, 157, 92, 0.16);
  --sky-glow:     rgba(118, 188, 245, 0.4);
  --sage-glow:    rgba(186, 217, 150, 0.4);
  --peach-glow:   rgba(255, 157, 92, 0.4);
  --gold-glow:    rgba(255, 210, 63, 0.4);
  --coral-glow:   rgba(255, 120, 102, 0.4);

  /* Reusable dashed pattern (use as: background: var(--dash-h) / border-image / etc.) */
  --dash-h:       repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 10px);
  --dash-v:       repeating-linear-gradient(0deg, var(--line-strong) 0 4px, transparent 4px 10px);

  /* === Fonts === */
  --font:            'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-scoreboard: 'Bebas Neue', sans-serif;
  --mono:            'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* === Layout === */
  --sidebar-width:           220px;
  --sidebar-width-collapsed: 64px;
  --topbar-height:           54px;  /* alto del header sticky (sin safe-area) — offset para sub-navs sticky */
  --active-band-height:      40px;  /* alto de la banda "en línea" (mobile) — reserva + offset sticky */
  --bottom-tab-height:       64px;
  --max-width:               1400px;
  --content-pad:             1rem;

  /* === Geometry === */
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* ========================================
     Legacy aliases — components not yet migrated
     to v5 semantic names. Each one resolves to
     its v5 equivalent so old screens render with
     the new palette without changes. Remove when
     the corresponding component is migrated.
     ======================================== */
  --bg-raised:    var(--bg-2);
  --bg-card:      var(--card);
  --bg-input:     var(--input);
  --bg-hover:     var(--card-2);
  --sidebar-bg:   var(--bg-2);

  --green:        var(--accent);
  --green-dim:    var(--accent-dim);
  --green-hover:  var(--accent-2);

  --gold:         var(--amarilla);
  --gold-dim:     rgba(255, 210, 63, 0.14);

  --red:          var(--roja);
  --red-dim:      rgba(230, 57, 70, 0.14);

  --blue:         var(--sky);
  --blue-dim:     var(--sky-dim);

  --text-1:       var(--fg);
  --text-2:       var(--fg-2);
  --text-3:       var(--fg-3);
  --text-inv:     var(--accent-ink);

  --border:        var(--line);
  --border-hover:  var(--line-strong);

  --font-brand:   var(--font-scoreboard);
}

@media (min-width: 768px) {
  :root {
    --content-pad: 2rem;
  }
}