/* ============================================================
   Rodaje · Sistema de tokens — Industrial / Garage premium
   Paleta: negro + amarillo + grises
   Soporta dark (default) y light, alterna con [data-theme]
   ============================================================ */

/* DARK (default) */
:root, [data-theme="dark"] {
  /* Tonos de superficie — paleta industrial */
  --bg: #111111;
  --surface: #2B2B2B;
  --surface-2: #3A3A3A;
  --surface-3: #4A4A4A;

  /* Texto */
  --text: #F9FAFB;
  --text-soft: #E5E7EB;
  --muted: #B5BAC1;

  /* Bordes */
  --border: #3A3A3A;
  --border-2: #4A4A4A;

  /* Acento (constante en ambos modos) */
  --accent: #FACC15;
  --accent-deep: #EAB308;
  --accent-soft: rgba(250, 204, 21, 0.20);
  --accent-fg: #111111;
  /* Color de acento para TEXTO (no fondos): debe contrastar con --bg */
  --accent-text: #FACC15;

  /* Estado */
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #60A5FA;
  --success: #10B981;

  /* Versiones legibles cuando se usan como TEXTO sobre fondo claro (chips, iconos
     coloreados con bg tinted). En dark mantenemos los tonos vivos; el override de
     light-mode los oscurece. */
  --warning-text: #F59E0B;
  --danger-text:  #EF4444;
  --info-text:    #60A5FA;
  --success-text: #10B981;

  /* Sombras (más fuertes en dark) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 12px 32px -8px rgba(0,0,0,.5), 0 4px 8px -2px rgba(0,0,0,.3);
  --shadow-lg: 0 28px 60px -16px rgba(0,0,0,.7);

  color-scheme: dark;
}

/* LIGHT */
[data-theme="light"] {
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --surface-3: #E5E7EB;

  --text: #111111;
  --text-soft: #374151;
  --muted: #4B5563;

  --border: #E5E7EB;
  --border-2: #D1D5DB;

  --accent-soft: rgba(250, 204, 21, 0.18);
  /* En light mode el amarillo sobre blanco es ilegible — usar tono más oscuro para texto */
  --accent-text: #A16207;

  /* Tonos -700/-800 más legibles en light sobre fondos casi blancos o tinted */
  --warning-text: #92400E; /* amber-800 */
  --danger-text:  #B91C1C; /* red-700 */
  --info-text:    #1D4ED8; /* blue-700 */
  --success-text: #047857; /* emerald-700 */

  --shadow-sm: 0 1px 2px rgba(17,17,17,.04);
  --shadow: 0 8px 32px -12px rgba(17,17,17,.10), 0 2px 6px -2px rgba(17,17,17,.06);
  --shadow-lg: 0 24px 60px -20px rgba(17,17,17,.18);

  color-scheme: light;
}

/* ===== Aliases legacy: mapean nombres viejos a nuevos para no romper código ===== */
:root, [data-theme="dark"], [data-theme="light"] {
  --bone:           var(--bg);
  --bone-2:         var(--surface-2);
  --ink:            var(--text);
  --ink-soft:       var(--text-soft);
  --line:           var(--border);
  --line-2:         var(--border-2);
  --forest:         var(--accent);
  --forest-soft:    var(--accent-deep);
  --forest-deep:    var(--accent-deep);
  --moss:           var(--accent-soft);

  /* Tipografías nuevas */
  --font-display: "Bebas Neue", "Impact", sans-serif;
  --font-sans:    "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Radius industrial: menos redondez */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  transition: background-color .25s ease, color .25s ease;
}

body { font-size: 15px; line-height: 1.55; letter-spacing: .005em; font-weight: 400; }

h1, h2, h3, h4, .display, .font-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
}

::selection { background: var(--accent); color: var(--accent-fg); }

a { color: inherit; text-decoration: none; }
a.link { color: var(--accent); border-bottom: 1px solid currentColor; }
a.link:hover { color: var(--accent-deep); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== Botones — estilo garage / industrial ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 44px; padding: 0 22px;
  border-radius: var(--radius);
  font-weight: 600; font-size: 13px;
  letter-spacing: .03em; text-transform: uppercase;
  transition: all .15s ease; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  font-family: var(--font-sans);
}
/* Primary = amarillo sólido (CTA principal) */
.btn-primary, .btn-forest {
  background: var(--accent);
  color: var(--accent-fg) !important;
  border-color: var(--accent-deep);
  font-weight: 700;
}
.btn-primary:hover, .btn-forest:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px var(--accent);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-forest {
  border-color: #B17F00;
}
/* Ghost = outline sutil */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-link { background: transparent; color: var(--text); padding: 0 6px; height: auto; border: 0; }
.btn-link:hover { color: var(--accent); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 12px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 14px; }

/* ===== Cards — fondo de superficie con borde marcado ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ===== Chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  text-transform: uppercase;
}
.chip-warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.chip-danger  { background: color-mix(in srgb, var(--danger) 15%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.chip-info    { background: color-mix(in srgb, var(--info) 15%, transparent);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.chip-neutral { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

/* ===== Inputs ===== */
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { height: auto; padding: 12px 14px; min-height: 110px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }

.label {
  display: block; font-size: 11px; font-weight: 600;
  margin-bottom: 6px; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}

.divider { height: 1px; background: var(--border); width: 100%; }

.kbd {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}

.tag-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

.grain {
  position: relative;
}
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .04; mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .24s; }
.rise-5 { animation-delay: .32s; }

.hairline { border-color: var(--border); }

/* Forzar texto oscuro sobre fondo amarillo donde quiera que aparezca */
.bg-forest, .bg-forest-soft { color: var(--accent-fg); }
.bg-forest *:not(.btn):not([class*="text-"]) { color: inherit; }