/* ============================================
   LEYENDAS DEL FUTBOL ARGENTINO — Design System
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Paleta AFA / Argentina ── */
  --bg-primary:   #EEF3FA;
  --bg-secondary: #DAE8F5;
  --bg-surface:   #ffffff;
  --bg-surface-2: #F2F7FC;
  --bg-card:      #ffffff;
  --bg-card-hover:#F0F6FF;

  --black:       #1a1a1a;
  --text:        #1e2d45;
  --text-bright: #0d1b2e;
  --text-dim:    #4e6a8a;
  --text-muted:  #7a93b2;

  --azul:         #0038A8;
  --celeste:      #75AADB;
  --celeste-light:#C0D8F0;

  --green:       #2d8a4e;
  --green-dark:  #1a6b38;
  --green-light: #3da862;
  --red:         #d43b3b;
  --red-dark:    #a93226;
  --orange:      #e8442a;
  --orange-dark: #c43520;

  --gold:      #c49a2a;
  --gold-dark: #a07a1a;

  /* ── Geometría moderna ── */
  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ── Sombras suaves con tinte azul ── */
  --shadow-sm:     0 1px 4px rgba(0,56,168,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:        0 4px 16px rgba(0,56,168,0.1),  0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:     0 10px 40px rgba(0,56,168,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:     0 20px 60px rgba(0,56,168,0.18), 0 8px 20px rgba(0,0,0,0.1);
  --shadow-blue:   0 4px 20px rgba(0,56,168,0.28);
  --shadow-orange: 0 4px 18px rgba(232,68,42,0.36);

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  --font-title: 'Oswald', sans-serif;
  --font-body:  'Inter', sans-serif;
}

/* ── DARK MODE ── */
body.dark {
  --bg-primary:   #080d18;
  --bg-secondary: #0d1526;
  --bg-surface:   #111e33;
  --bg-surface-2: #162640;
  --bg-card:      #111e33;
  --bg-card-hover:#1d3055;

  --black:       #dde5f0;
  --text:        #b8c8e0;
  --text-bright: #e8f0fa;
  --text-dim:    #607090;
  --text-muted:  #3d5070;

  --azul:         #4da6ff;
  --celeste:      #3390ee;
  --celeste-light:#1a72cc;

  --shadow-sm:     0 1px 4px rgba(0,0,0,0.35);
  --shadow:        0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:     0 10px 40px rgba(0,0,0,0.58);
  --shadow-xl:     0 20px 60px rgba(0,0,0,0.68);
  --shadow-blue:   0 4px 20px rgba(77,166,255,0.22);
  --shadow-orange: 0 4px 18px rgba(232,68,42,0.28);

  --gold:  #d4a017;
  --green: #3ecf6e;
}

/* Header dark */
body.dark .header {
  background: rgba(8,13,24,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(77,166,255,0.1);
}
body.dark .header-titulo { color: #e8f0fa; }
body.dark .header-sub    { color: rgba(180,210,255,0.5); }
body.dark .nav-btn       { color: rgba(180,210,255,0.65); }
body.dark .nav-btn:hover { color: #e8f0fa; background: rgba(77,166,255,0.1); }
body.dark .nav-btn.active {
  background: rgba(77,166,255,0.18);
  color: #e8f0fa;
  box-shadow: none;
}
body.dark .header-toggle span { background: #e8f0fa; }
body.dark .header-escudo      { color: rgba(220,235,255,0.9); }
body.dark .seed-copy-btn      { color: rgba(180,210,255,0.8); border-color: rgba(100,150,255,0.25); }
body.dark .header-nav.open    { background: rgba(8,13,24,0.97); border-bottom-color: rgba(77,166,255,0.1); }
body.dark .header-nav.open .nav-btn { color: var(--text); }
body.dark .header-nav.open .nav-btn.active { background: var(--bg-surface); color: var(--text-bright); }

/* Dark grupos */
body.dark .grupo-card   { border-color: rgba(255,255,255,0.07); }
body.dark .grupo-header { background: var(--bg-surface-2); }
body.dark .grupo-letra  { color: var(--text-bright); }
body.dark .grupo-estado { color: var(--text-dim); }

/* Dark buttons */
body.dark .btn,
body.dark .btn-hero,
body.dark .btn-secondary,
body.dark .draft-form-btn,
body.dark .liga-btn-sim,
body.dark .liga-btn-aux { box-shadow: var(--shadow) !important; }

/* Toggle dark */
.dark-toggle {
  font-size: 1.1rem !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-full) !important;
  opacity: 0.85;
  line-height: 1;
}
.dark-toggle:hover { opacity: 1; transform: scale(1.1); }

/* ── HTML & BODY ── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 15% 5%,  rgba(117,170,219,0.20) 0%, transparent 52%),
    radial-gradient(ellipse at 85% 88%, rgba(0,56,168,0.10)    0%, transparent 48%),
    radial-gradient(ellipse at 88% 8%,  rgba(232,68,42,0.05)   0%, transparent 38%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

body.dark {
  background-image:
    radial-gradient(ellipse at 15% 5%,  rgba(77,166,255,0.07) 0%, transparent 52%),
    radial-gradient(ellipse at 85% 88%, rgba(0,56,168,0.13)   0%, transparent 48%),
    radial-gradient(ellipse at 88% 8%,  rgba(232,68,42,0.04)  0%, transparent 38%);
}

a      { color: var(--text-bright); text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--celeste-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--celeste); }