/* ═══════════════════════════════════════════════
   Custom styles for Chamalongos
   ═══════════════════════════════════════════════ */

/* ── Letter Color Palette ───────────────────────
   Escala visual: claridad → oscuridad / alerta
   Alafia   → claridad, equilibrio, bendición
   Itawa    → advertencia leve, incompleto
   Eyeife   → estabilidad condicionada
   Ocana    → obstáculo, conflicto, alerta
   Oyekun   → oscuridad, cierre, peligro
   ─────────────────────────────────────────────── */
:root {
  --alafia: #F8F1D4;
  --itawa:  #F2C94C;
  --eyeife: #27AE60;
  --ocana:  #E67E22;
  --oyekun: #2D1B4E;
}

/* Text colors for letter names on dark backgrounds */
.letter-alafia { color: var(--alafia); }
.letter-itawa  { color: var(--itawa); }
.letter-eyeife { color: var(--eyeife); }
.letter-ocana  { color: var(--ocana); }
.letter-oyekun { color: #7C5CBF; }  /* lighter violet for readability on #111 */

/* Badge/pill styles for filter buttons */
.badge-alafia {
  background: rgba(248, 241, 212, 0.12);
  color: var(--alafia);
  border-color: rgba(248, 241, 212, 0.3);
}
.badge-itawa {
  background: rgba(242, 201, 76, 0.12);
  color: var(--itawa);
  border-color: rgba(242, 201, 76, 0.3);
}
.badge-eyeife {
  background: rgba(39, 174, 96, 0.12);
  color: var(--eyeife);
  border-color: rgba(39, 174, 96, 0.3);
}
.badge-ocana {
  background: rgba(230, 126, 34, 0.12);
  color: var(--ocana);
  border-color: rgba(230, 126, 34, 0.3);
}
.badge-oyekun {
  background: rgba(45, 27, 78, 0.35);
  color: #A78BFA;
  border-color: rgba(45, 27, 78, 0.5);
}

/* Dot colors for pattern visualization */
.dot-alafia { background: var(--alafia); }
.dot-itawa  { background: var(--itawa); }
.dot-eyeife { background: var(--eyeife); }
.dot-ocana  { background: var(--ocana); }
.dot-oyekun { background: #7C5CBF; }


/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ── Line clamp utilities ─────────────────────── */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-none {
  -webkit-line-clamp: unset;
  display: block;
}

/* ── Transitions ──────────────────────────────── */
.htmx-swapping {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#entries-grid > div {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Select styling ───────────────────────────── */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* ── Focus visible ────────────────────────────── */
*:focus-visible {
  outline: none;
}

/* ── Animations ───────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#entries-grid > div {
  animation: fadeIn 0.3s ease forwards;
}