/* ========================================
   v5 design tokens — Clavalo
   Dark-first, warm grays + grass green accent.
   See docs/specs/payments-and-redesign.md (Track A).
   ======================================== */
:root {
  /* === Surfaces === */
  --bg:           #1f2220;
  --bg-2:         #1a1d1b;
  --card:         #2a2e2b;
  --card-2:       #252827;
  --input:        #1a1d1b;

  /* === Foreground / text === */
  --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 (verde césped) === */
  --accent:       #4ec77a;
  --accent-2:     #2f9655;
  --accent-ink:   #0e1a12;
  --accent-dim:   rgba(78, 199, 122, 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(78, 199, 122, 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;
  --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:         #6cace4;
  --blue-dim:     rgba(108, 172, 228, 0.14);

  --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;
  }
}