/* Tokens base (tema claro) */
:root {
  /* base / text */
  --fg: #0A0A0A;
  --bg: #FFFFFF;
  --muted: #667085;
  --border: #E5E7EB;
  --card: #FFFFFF;

  /* brand */
  --primary: #111827;     /* charcoal */
  --primary-fg: #FFFFFF;

  /* accent (data/tech) */
  --accent: #2563EB;      /* altern: #1D4ED8 o #3B82F6 */
  --accent-fg: #FFFFFF;

  /* estados */
  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #DC2626;
}

/* Tema oscuro “ocean” (activable con data-theme="ocean") */
:root[data-theme="ocean"] {
  --bg: #0B1220;
  --fg: #E6EEFC;
  --muted: #96A3BD;
  --border: #1F2A44;
  --card: #0F172A;

  --primary: #0EA5E9;     /* cyan */
  --primary-fg: #0B1220;

  --accent: #22C55E;      /* green accent */
  --accent-fg: #0B1220;

  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #EF4444;
}

/* Tema “jackpot” (activable con data-theme="jackpot") */
:root[data-theme="jackpot"] {
  /* Base */
  --bg: #0A1230;         /* azul noche */
  --fg: #F5F7FF;         /* casi blanco (bola) */
  --muted: #A9B4D0;      /* texto secundario azul-gris */
  --border: #243054;     /* borde discreto */
  --card: #0F1A3E;       /* paneles ligeramente más claros que el fondo */

  /* Marca */
  --primary: #1F4CE6;    /* azul brillante (Melate/lotto vibe) */
  --primary-fg: #FFFFFF;

  /* Acento (Powerball) */
  --accent: #E11D2E;     /* rojo powerball */
  --accent-fg: #FFFFFF;

  /* Estados */
  --success: #22C55E;    /* ganador/verde */
  --warning: #F59E0B;    /* ámbar */
  --danger:  #EF4444;    /* error */

  /* Extras para detalles “jackpot” */
  --gold: #F6C453;       /* dorado sutil para badges/pills */
  --ball-white: #FFFFFF; /* util si quieres chips tipo “bola” */
}

/* (Opcional) pequeños acentos visuales con el tema jackpot */
:root[data-theme="jackpot"] .logo-badge {
  background: var(--ball-white);
  color: #111827;
  border: 2px solid var(--primary);
}
:root[data-theme="jackpot"] .heading-accent {
  color: var(--primary);
}
:root[data-theme="jackpot"] .surface-blur {
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-color: var(--border);
}
:root[data-theme="jackpot"] .badge-gold {
  background: var(--gold);
  color: #1A1A1A;
}
:root[data-theme="jackpot"] .link {
  color: color-mix(in oklab, var(--fg) 80%, var(--primary));
}
:root[data-theme="jackpot"] .border-var { border-color: var(--border); }
:root[data-theme="jackpot"] .text-muted { color: var(--muted); }


/* Tema “lucky” (activable con data-theme="lucky") */
:root[data-theme="lucky"] {
  /* Base */
  --bg: #0E1A11;          /* verde oscuro profundo, casi bosque */
  --fg: #F5FFF7;          /* blanco cálido con tinte verde */
  --muted: #9BB59E;       /* verde grisáceo para texto secundario */
  --border: #23462B;      /* borde natural sutil */
  --card: #152818;         /* panel ligeramente más claro que el fondo */

  /* Marca principal */
  --primary: #16A34A;      /* verde esmeralda brillante (suerte) */
  --primary-fg: #FFFFFF;

  /* Acento (suerte dorada / fichas) */
  --accent: #EAB308;       /* dorado vivo */
  --accent-fg: #0E1A11;

  /* Estados */
  --success: #22C55E;      /* verde ganador */
  --warning: #FACC15;      /* amarillo cálido */
  --danger: #DC2626;       /* rojo discreto */

  /* Extras “Lucky vibes” */
  --gold: #FFD85B;         /* brillo suave para detalles */
  --leaf: #00C26B;         /* toque verde trébol para highlights */
}

/* Detalles visuales “Lucky” */
:root[data-theme="lucky"] .logo-badge {
  background: var(--leaf);
  color: #0E1A11;
  border: 2px solid var(--gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent);
}

:root[data-theme="lucky"] .heading-accent {
  color: var(--accent);
}

:root[data-theme="lucky"] .surface-blur {
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
  backdrop-filter: saturate(130%) blur(10px);
  border-color: var(--border);
}

:root[data-theme="lucky"] .badge-gold {
  background: var(--gold);
  color: #0E1A11;
  font-weight: 600;
}

:root[data-theme="lucky"] .link {
  color: color-mix(in oklab, var(--fg) 80%, var(--accent));
}

:root[data-theme="lucky"] .border-var { border-color: var(--border); }
:root[data-theme="lucky"] .text-muted { color: var(--muted); }

:root[data-theme="lucky"] .btn-primary {
  background: linear-gradient(to bottom right, var(--primary), var(--leaf));
  color: var(--primary-fg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--leaf) 60%, transparent);
}
:root[data-theme="lucky"] .btn-outline:hover {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}



/* Helpers (opcional): si quieres asegurar fondos generales */
html, body {
  background: var(--bg);
  color: var(--fg);
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition;
  }
  .btn-primary {
    background: var(--primary);
    color: var(--primary-fg);
  }
  .btn-primary:hover { filter: brightness(1.05); }

  .btn-accent {
    background: var(--accent);
    color: var(--accent-fg);
  }
  .btn-accent:hover { filter: brightness(1.05); }

  .btn-outline {
    @apply border;
    border-color: var(--border);
    color: var(--fg);
    background: transparent;
  }
  .btn-outline:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }

  .card {
    background: var(--card);
    border: 1px solid var(--border);
    @apply rounded-2xl;
  }
  .muted { color: var(--muted); }
  .kpi { @apply p-5 rounded-xl border; border-color: var(--border); background: var(--card); }
}

/* Superficies / contenedores */
.surface-blur {
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

/* Tipografía / colores */
.text-fg { color: var(--fg); }
.text-muted { color: var(--muted); }
.heading { color: var(--fg); }           /* títulos por defecto */
.heading-accent { color: var(--accent); }/* si quieres acento en H1/H2 */
.link    { color: var(--fg); }
.link:hover { color: color-mix(in oklab, var(--fg) 75%, var(--accent)); }

/* Botones (ya tenías algunas, consolido) */
.btn { display:inline-flex; align-items:center; justify-content:center;
       border-radius: .75rem; padding:.5rem 1rem; font-weight:500; transition:filter .15s; }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { filter: brightness(1.05); }

.btn-accent { background: var(--accent); color: var(--accent-fg); }
.btn-accent:hover { filter: brightness(1.05); }

.btn-outline { border:1px solid var(--border); background: transparent; color: var(--fg); }
.btn-outline:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }

/* Cards / bordes */
.card { background: var(--card); border:1px solid var(--border); border-radius: 1rem; }
.border-var { border-color: var(--border) !important; }

/* Badge de logo */
.logo-badge { background: var(--primary); color: var(--primary-fg); }