/*
 * YouFeelingLucky? Platform — Shared Tool Theme
 * -----------------------------------------------
 * Electric · v1.0 · Sep 2026 (Ref: /tools/YFL Website Style Guide)
 * Electric. Black, white, one volt.
 *
 * Dropped into every embedded tool (via <link rel="stylesheet" href="/yfl-theme.css">
 * or an inline <style id="yfl-theme">) so all tools share a single, unified look.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Figtree:wght@400..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Electric Palette */
  --e-black: #09090a;
  --e-dark: #111113;
  --e-dark2: #17171a;
  --e-dark3: #202024;
  --e-volt: #f4f215;
  --e-volt2: #faf96e;
  --e-volt-a: rgba(244, 242, 21, 0.1);
  --e-white: #fafaf7;
  --e-off: #bdbdb7;
  --e-muted: #85857f;
  --e-dim: #4e4e4a;
  --e-amber: #ffa028;
  --e-red: #ff5a4e;
  --e-line: rgba(255, 255, 255, 0.09);
  --e-line2: rgba(255, 255, 255, 0.18);

  /* Legacy & YFL variable mappings */
  --yfl-black: var(--e-black);
  --yfl-dark: var(--e-dark);
  --yfl-dark2: var(--e-dark2);
  --yfl-dark3: var(--e-dark3);
  --yfl-green: var(--e-volt);
  --yfl-green2: var(--e-volt2);
  --yfl-lime: var(--e-volt);
  --yfl-lime2: var(--e-volt2);
  --yfl-gold: var(--e-volt);
  --yfl-gold2: var(--e-volt2);
  --yfl-white: var(--e-white);
  --yfl-off: var(--e-off);
  --yfl-muted: var(--e-muted);
  --yfl-dim: var(--e-dim);
  --yfl-border: var(--e-line);
  --yfl-border2: var(--e-line2);
  --yfl-radius: 6px;

  /* Typography */
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --yfl-font-body: var(--body);
  --yfl-font-display: var(--display);
  --yfl-font-playfair: var(--display);
  --yfl-font-dm-sans: var(--body);

  /* Elevation & Glow */
  --glow: 0 0 26px rgba(244, 242, 21, 0.45);
  --glow-lime: var(--glow);
  --glow-gold: var(--glow);
  color-scheme: dark;
}

/* ---- Base ---- */
html,
body,
#root,
#app,
main {
  background: var(--e-black) !important;
  color: var(--e-white) !important;
  font-family: var(--body) !important;
  line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display) !important;
  font-stretch: 125% !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--e-white) !important;
}

h1 {
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

a {
  color: var(--e-volt) !important;
  text-decoration: none;
}
a:hover {
  color: var(--e-volt2) !important;
}

::selection {
  background: var(--e-volt) !important;
  color: #000 !important;
}

/* ---- Buttons ---- */
button.primary,
button[data-variant="primary"],
.btn-primary,
.yfl-btn-primary {
  background: var(--e-volt) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s !important;
}
button.primary:hover,
button[data-variant="primary"]:hover,
.btn-primary:hover,
.yfl-btn-primary:hover {
  background: var(--e-volt2) !important;
  box-shadow: var(--glow) !important;
  transform: translateY(-1px) !important;
}

button.secondary,
button[data-variant="secondary"],
.btn-secondary,
.btn-outline,
.yfl-btn-gold {
  background: transparent !important;
  color: var(--e-volt) !important;
  border: 1px solid var(--e-volt) !important;
  border-radius: 6px !important;
  font-family: var(--body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
button.secondary:hover,
button[data-variant="secondary"]:hover,
.btn-secondary:hover,
.btn-outline:hover,
.yfl-btn-gold:hover {
  background: var(--e-volt-a) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--e-muted) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 6px !important;
}
.btn-ghost:hover {
  color: var(--e-white) !important;
  border-color: var(--e-line2) !important;
}

/* ---- Cards / panels ---- */
.card,
[class*="card"] {
  background: var(--e-dark2) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 12px !important;
}
.card:hover,
[class*="card"]:hover {
  background: var(--e-dark3) !important;
  border-color: var(--e-line2) !important;
}

/* ---- Neutralizing legacy light/white/slate/emerald/indigo/gold classes ---- */
header.bg-white,
div.bg-white,
section.bg-white,
article.bg-white,
[class*="bg-slate-9"], [class*="bg-gray-9"], [class*="bg-zinc-9"], [class*="bg-neutral-9"] {
  background-color: var(--e-black) !important;
}
[class*="bg-slate-8"], [class*="bg-gray-8"], [class*="bg-zinc-8"], [class*="bg-neutral-8"], [class*="bg-slate-900"] {
  background-color: var(--e-dark) !important;
}
[class*="bg-slate-7"], [class*="bg-gray-7"], [class*="bg-slate-800"] {
  background-color: var(--e-dark2) !important;
}

.bg-white {
  background-color: var(--e-dark2) !important;
  border-color: var(--e-line) !important;
}

.text-slate-900, .text-slate-800, .text-slate-700 {
  color: var(--e-white) !important;
}
.text-slate-500, .text-slate-400, .text-slate-300 {
  color: var(--e-off) !important;
}
.border-slate-300, .border-slate-200, .border-slate-100 {
  border-color: var(--e-line) !important;
}

[class*="bg-emerald-"], [class*="bg-indigo-"], [class*="bg-blue-6"], [class*="bg-lime-"] {
  background-color: var(--e-volt) !important;
  color: #000 !important;
}

[class*="text-emerald-"], [class*="text-indigo-"], [class*="text-blue-4"], [class*="text-blue-5"], [class*="text-lime-"], [class*="text-gold"] {
  color: var(--e-volt) !important;
}

[class*="border-emerald-"], [class*="border-indigo-"], [class*="border-lime-"], [class*="border-gold"] {
  border-color: var(--e-volt) !important;
}

/* ---- Scrollbars ---- */
* {
  scrollbar-color: var(--e-dim) var(--e-dark);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--e-dark);
}
*::-webkit-scrollbar-thumb {
  background: var(--e-dim);
  border-radius: 4px;
}

/* ---- Inputs ---- */
input, textarea, select {
  background: var(--e-black) !important;
  border: 1px solid var(--e-line) !important;
  color: var(--e-white) !important;
  border-radius: 8px !important;
  font-family: var(--body) !important;
  padding: 12px 14px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--e-volt) !important;
  box-shadow: 0 0 0 3px rgba(244, 242, 21, 0.15) !important;
  outline: none !important;
}

/* ---- Badges / Tags ---- */
.badge-free, [data-tag="free"] {
  background: var(--e-volt-a) !important;
  border: 1px solid rgba(244, 242, 21, 0.35) !important;
  color: var(--e-volt) !important;
  border-radius: 9999px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.badge-paid, [data-tag="paid"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--e-line2) !important;
  color: var(--e-white) !important;
  border-radius: 9999px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}