/* /v5/css/theme.css
   Variables y temas. Colores por programa y ALERTA.
   Ajustes:
   - theme-sunset (sepia amable)
   - theme-cyan (taupe outline más claro, legible y descansado)
*/

/* ========== Variables base ========== */
:root {
  --bg-color: #f5f5f5;
  --text-color: #111;
  --accent-color: #000;

  --fg-color: var(--text-color);
  --fg-muted: #444;
  --card-bg: #ffffff;
  --input-bg: #f5f5f5;
  --input-bd: #e1e1e1;
  --btn-bg: #fafafa;
  --btn-bd: #e1e1e1;

  --font-main: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-title: 'Press Start 2P', ui-monospace, monospace;
  --radius: 1rem;

  /* outline por defecto (para que no cambie la caja entre temas) */
  --outline-w: 2px;
  --outline-w-current: 3px;
}

/* ========== 1) Light (tal cual) ========== */
.theme-light-colorful {
  --bg-color: #fafafa;
  --text-color: #111;
  --accent-color: #000;

  --fg-color: var(--text-color);
  --fg-muted: #333;
  --card-bg: #ffffff;
  --input-bg: #f5f5f5;
  --input-bd: #e1e1e1;
  --btn-bg: #fafafa;
  --btn-bd: #e1e1e1;
}

/* ========== 2) Dark (tal cual) ========== */
.theme-dark-colorful,
.theme-dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --accent-color: #bdbdbd;

  --fg-color: var(--text-color);
  --fg-muted: #b5b5b5;
  --card-bg: #121212;
  --input-bg: #1a1a1a;
  --input-bd: #2a2a2a;
  --btn-bg: #1a1a1a;
  --btn-bd: #2a2a2a;
}

/* ========== 3) Sunset – sepia amable (nuevo) ========== */
.theme-sunset {
  --bg-color: #FCF5E7;
  --text-color: #2E261E;
  --accent-color: #E96E4C;

  --fg-color: var(--text-color);
  --fg-muted: #5a4a40;
  --card-bg: #FFFFFF;
  --input-bg: #F8EEE2;
  --input-bd: #F0D8C7;
  --btn-bg: #F8EEE2;
  --btn-bd: #F0D8C7;
}

/* ========== 4) Cyan – taupe outline más claro (nuevo) ========== */
/* Estética: borde taupe sobre fondo oscuro. */
.theme-cyan {
  --bg-color: #2F2C29;
  --text-color: #F0EEE9;
  --accent-color: #CFC6BC;
  --fg-color: var(--text-color);
  --fg-muted: #C0B8AF;

  --card-bg: #383431;
  --input-bg: #35312E;
  --input-bd: #4A4642;
  --btn-bg: #35312E;
  --btn-bd: #4A4642;

  /* Outline específico */
  --outline-bd: #4F4A46;
  --outline-bg-current: #3B3733;

  /* Grosor que te gustó */
  --outline-w: 2px;
  --outline-w-current: 3px;
}

/* Outline visible solo en este tema */
.theme-cyan .program-card {
  background: transparent !important;
  border-color: var(--outline-bd) !important;
  color: var(--text-color) !important;
}
.theme-cyan .program-card.current-program {
  background: var(--outline-bg-current) !important;
  border-width: var(--outline-w-current) !important;
}
.theme-cyan .program-card .program-title,
.theme-cyan .program-card .program-desc,
.theme-cyan .program-card .program-meta,
.theme-cyan .program-card a {
  color: var(--text-color) !important;
}
.theme-cyan .footer-info i,
.theme-cyan #streamCircle {
  text-shadow: 0 0 6px color-mix(in oklab, var(--accent-color) 35%, transparent);
}

/* ========== 5) Grayscale (tal cual) ========== */
.theme-grayscale {
  --bg-color: #e0e0e0;
  --text-color: #111;
  --accent-color: #333;

  --fg-color: var(--text-color);
  --fg-muted: #333;
  --card-bg: #ffffff;
  --input-bg: #efefef;
  --input-bd: #d8d8d8;
  --btn-bg: #f3f3f3;
  --btn-bd: #d8d8d8;
}

/* ========== Fondos por programa (se respeta currentColor para texto) ========== */
.program-card[data-folder="sp"]  { --card-bg: #FFE4E1; } /* Sweet Pop */
.program-card[data-folder="dm"]  { --card-bg: #D6EAF8; } /* Dimension */
.program-card[data-folder="pg"]  { --card-bg: #FAD7A0; } /* Plugged */
.program-card[data-folder="bpm"] { --card-bg: #E8DAEF; } /* BPM */
.program-card[data-folder="ex"]  { --card-bg: #B2DFDB; } /* Experience */

/* ALERTA: fondo consistente (texto se fuerza blanco en components.css) */
.program-card[data-folder="alert"] { --card-bg: #C62828; }

/* Escala de grises: neutraliza tarjetas (excepto ALERTA) */
.theme-grayscale .program-card:not([data-folder="alert"]) {
  background: #ccc !important;
  color: #111 !important;
}