/* ==========================================================================
   legacy-shim.css — Design Token Migration Layer
   ==========================================================================
   Maps legacy Tailwind-style utility classes to the new CSS custom
   property design system. This file provides backward compatibility
   while templates are migrated to use component templates.

   Reference: CSS custom properties defined in templates/base.html
   ========================================================================== */

/* ── Background Colors ── */
.bg-mosaiq-card { background: var(--bg-surface); }
.bg-mosaiq-bg { background: var(--bg-root); }
.bg-mosaiq-panel { background: var(--bg-surface); }
.bg-mosaiq-sink { background: var(--bg-deepest); }
.bg-mosaiq-elevated { background: var(--bg-elevated); }

/* Hover backgrounds */
.hover\:bg-mosaiq-bg:hover { background: var(--bg-hover); }
.hover\:bg-mosaiq-bg\/30:hover { background: rgba(26, 36, 64, 0.3); }
.hover\:bg-mosaiq-card:hover { background: var(--bg-hover); }

/* ── Text Colors ── */
.text-mosaiq-text { color: var(--text-primary); }
.text-mosaiq-muted { color: var(--text-tertiary); }
.text-mosaiq-accent { color: var(--accent); }
.text-mosaiq-text-secondary { color: var(--text-secondary); }
.text-mosaiq-border { color: var(--border-standard); }

/* Hover text */
.hover\:text-mosaiq-text:hover { color: var(--text-primary); }
.hover\:text-mosaiq-accent:hover { color: var(--accent); }
.group:hover .group-hover\:text-mosaiq-accent { color: var(--accent); }

/* ── Border Colors ── */
.border-mosaiq-border { border-color: var(--border-standard); }
.border-mosaiq-border\/20 { border-color: rgba(255,255,255,0.04); }
.border-mosaiq-border\/30 { border-color: rgba(255,255,255,0.06); }
.border-mosaiq-border\/40 { border-color: rgba(255,255,255,0.08); }

.border-mosaiq-accent { border-color: var(--accent); }
.border-mosaiq-accent\/50 { border-color: rgba(16, 185, 129, 0.5); }
.border-l-mosaiq-accent { border-left-color: var(--accent); }

.hover\:border-mosaiq-accent:hover { border-color: var(--accent); }
.hover\:border-mosaiq-accent\/50:hover { border-color: rgba(16, 185, 129, 0.5); }

/* ── Divide ── */
.divide-mosaiq-border > * + * { border-top-color: var(--border-standard); }
.divide-y-mosaiq-border > * + * { border-top: 1px solid var(--border-standard); }

/* ── Focus Ring ── */
.focus\:ring-mosaiq-accent\/50:focus {
  box-shadow: 0 0 0 2px var(--accent-dim), 0 0 0 4px rgba(16, 185, 129, 0.25);
}

.focus\:ring-mosaiq-accent:focus {
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Ring offset cards ── */
.ring-offset-mosaiq-card {
  --ring-offset-color: var(--bg-surface);
}

/* ── Shadow ── */
.shadow-mosaiq-accent\/5 {
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.05);
}

/* ── Placeholder ── */
.placeholder-mosaiq-border::placeholder {
  color: var(--border-standard);
}
.placeholder\:text-mosaiq-border::placeholder {
  color: var(--border-standard);
}

/* ── Transition ── */
.transition-all {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-colors {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Opacity overrides ── */
.hover\:opacity-90:hover { opacity: 0.9; }

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