/* Variables de diseño (tokens) y reset
   (archivo: css/base/tokens-reset.css) */
/* ============================================================
   TOKENS & RESET
   ============================================================ */
:root {
  --yellow-bright:  #FFD700;
  --yellow-mid:     #F5C200;
  --yellow-dark:    #C89A00;
  --yellow-stripe1: #F0B800;
  --yellow-stripe2: #D49500;

  --bg-outer:       #1a1a1a;
  --bg-panel:       #2a2a2a;
  --bg-card:        #2e2e2e;
  --bg-card-inner:  #3a3a3a;

  --border-bold:    #111111;
  --border-card:    #222222;

  --green-done:     #39ff14;
  --red-close:      #ff3333;

  --text-white:     #ffffff;
  --text-light:     #eeeeee;
  --text-muted:     #999999;
  --text-yellow:    #FFD700;
  --text-green:     #39ff14;
  --text-orange:    #ff8c00;

  --radius-card:  14px;
  --radius-btn:   8px;

  --shadow-card:  0 6px 20px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 18px rgba(255,215,0,0.45);
  --shadow-green: 0 0 18px rgba(57,255,20,0.5);
}

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

body {
  font-family: 'Fredoka', sans-serif;
  background: var(--bg-outer);
  color: var(--text-white);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--yellow-dark); }