/* states.css — Hover, focus, active, group, responsive (editorial palette) */

/* ===== Hover ===== */
.hover\:bg-primary-dark:hover        { background-color: var(--color-primary-dark); background-image: none; }
.hover\:bg-primary\/20:hover         { background-color: rgba(20, 184, 166, 0.22); }
.hover\:bg-accent\/20:hover          { background-color: rgba(34, 211, 238, 0.22); }
.hover\:bg-accent\/25:hover          { background-color: rgba(34, 211, 238, 0.28); }
.hover\:bg-danger\/5:hover           { background-color: rgba(244, 63, 94, 0.06); }
.hover\:bg-danger\/10:hover          { background-color: rgba(244, 63, 94, 0.12); }
.hover\:bg-danger\/30:hover          { background-color: rgba(244, 63, 94, 0.32); }
.hover\:bg-success\/25:hover         { background-color: rgba(16, 185, 129, 0.28); }
.hover\:bg-surface-light:hover       { background-color: rgba(12, 12, 16, 0.9); }
.hover\:bg-surface-lighter:hover     { background-color: rgba(255, 255, 255, 0.05); }
.hover\:bg-surface-lighter\/50:hover { background-color: rgba(255, 255, 255, 0.035); }
.hover\:bg-zinc-700:hover            { background-color: rgba(255, 255, 255, 0.08); }
.hover\:bg-zinc-700\/50:hover        { background-color: rgba(255, 255, 255, 0.05); }
.hover\:bg-red-600:hover             { background-color: #e11d48; }
.hover\:bg-violet-500\/15:hover      { background-color: rgba(139, 92, 246, 0.17); }

.hover\:text-white:hover    { color: #ffffff; }
.hover\:text-zinc-100:hover { color: #ededf0; }
.hover\:text-zinc-200:hover { color: #d9d9df; }
.hover\:text-zinc-300:hover { color: #bdbdc7; }
.hover\:text-danger:hover   { color: var(--color-danger); }
.hover\:text-primary:hover  { color: var(--color-primary); }
.hover\:text-accent:hover   { color: var(--color-accent); }

.hover\:border-zinc-600:hover          { border-color: rgba(255, 255, 255, 0.2); }
.hover\:border-primary\/25:hover       { border-color: rgba(20, 184, 166, 0.3); }
.hover\:border-primary\/30:hover       { border-color: rgba(20, 184, 166, 0.38); }
.hover\:border-accent\/20:hover        { border-color: rgba(34, 211, 238, 0.22); }
.hover\:border-accent\/30:hover        { border-color: rgba(34, 211, 238, 0.32); }
.hover\:border-success\/30:hover       { border-color: rgba(16, 185, 129, 0.32); }
.hover\:border-violet-500\/30:hover    { border-color: rgba(139, 92, 246, 0.32); }
.hover\:border-amber-500\/30:hover     { border-color: rgba(245, 158, 11, 0.32); }
.hover\:border-cyan-500\/30:hover      { border-color: rgba(34, 211, 238, 0.32); }
.hover\:border-emerald-500\/30:hover   { border-color: rgba(16, 185, 129, 0.32); }
.hover\:border-rose-500\/30:hover      { border-color: rgba(244, 63, 94, 0.32); }

.hover\:underline:hover          { text-decoration-line: underline; }
.hover\:opacity-100:hover        { opacity: 1; }
.hover\:decoration-current:hover { text-decoration-color: currentColor; }

.hover\:shadow-primary\/25:hover { box-shadow: 0 14px 36px -8px rgba(20, 184, 166, 0.45), 0 0 0 0.5px rgba(94, 234, 212, 0.3) inset; }
.hover\:shadow-primary\/30:hover { box-shadow: 0 16px 40px -6px rgba(20, 184, 166, 0.55), 0 0 0 0.5px rgba(94, 234, 212, 0.35) inset; }

/* ===== Focus ===== */
.focus\:outline-none:focus     { outline: none; }
.focus\:border-primary:focus   { border-color: var(--color-primary); }
.focus\:border-danger:focus    { border-color: var(--color-danger); }
.focus\:ring-1:focus           { box-shadow: 0 0 0 3px var(--tw-ring-color, rgba(20, 184, 166, 0.25)); }
.focus\:ring-primary\/50:focus { --tw-ring-color: rgba(20, 184, 166, 0.28); }
.focus-visible\:outline:focus-visible          { outline-style: solid; }
.focus-visible\:outline-2:focus-visible        { outline-width: 2px; }
.focus-visible\:outline-primary:focus-visible  { outline-color: var(--color-primary); }

/* ===== Active ===== */
.active\:bg-primary-dark:active { background-color: var(--color-primary-dark); }

/* ===== Group ===== */
.group:hover .group-hover\:bg-primary\/20       { background-color: rgba(20, 184, 166, 0.22); }
.group:hover .group-hover\:bg-accent\/20        { background-color: rgba(34, 211, 238, 0.22); }
.group:hover .group-hover\:bg-success\/20       { background-color: rgba(16, 185, 129, 0.22); }
.group:hover .group-hover\:rotate-90            { transform: rotate(90deg); }
.group:hover .group-hover\:translate-x-0\.5     { transform: translateX(2px); }

/* ===== Responsive breakpoints ===== */
@media (min-width: 640px) {
    .sm\:block              { display: block; }
    .sm\:hidden             { display: none; }
    .sm\:inline             { display: inline; }
    .sm\:flex-col           { flex-direction: column; }
    .sm\:flex-row           { flex-direction: row; }
    .sm\:flex-shrink-0      { flex-shrink: 0; }
    .sm\:items-center       { align-items: center; }
    .sm\:justify-between    { justify-content: space-between; }
    .sm\:self-auto          { align-self: auto; }
    .sm\:grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:gap-4              { gap: 1rem; }
    .sm\:gap-6              { gap: 1.5rem; }
    .sm\:gap-8              { gap: 2rem; }
    .sm\:w-48               { width: 12rem; }
    .sm\:w-auto             { width: auto; }
    .sm\:p-5                { padding: 1.25rem; }
    .sm\:p-16               { padding: 4rem; }
    .sm\:px-0               { padding-left: 0; padding-right: 0; }
    .sm\:px-5               { padding-left: 1.25rem; padding-right: 1.25rem; }
    .sm\:px-6               { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:py-8               { padding-top: 2rem; padding-bottom: 2rem; }
    .sm\:py-10              { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .sm\:py-14              { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .sm\:py-20              { padding-top: 5rem; padding-bottom: 5rem; }
    .sm\:py-24              { padding-top: 6rem; padding-bottom: 6rem; }
    .sm\:py-28              { padding-top: 7rem; padding-bottom: 7rem; }
    .sm\:pb-0               { padding-bottom: 0; }
    .sm\:mx-0               { margin-left: 0; margin-right: 0; }
    .sm\:mb-8               { margin-bottom: 2rem; }
    .sm\:text-sm            { font-size: 0.875rem; }
    .sm\:text-lg            { font-size: 1.125rem; }
    .sm\:text-2xl           { font-size: 1.6rem; }
    .sm\:text-3xl           { font-size: 2.1rem; }
    .sm\:text-5xl           { font-size: clamp(3rem, 6vw, 4.25rem); line-height: 0.98; letter-spacing: -0.038em; }
    .sm\:overflow-x-visible { overflow-x: visible; }
}

@media (min-width: 768px) {
    .md\:flex        { display: flex; }
    .md\:hidden      { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:text-6xl    { font-size: clamp(3.75rem, 8vw, 5.75rem); line-height: 0.94; letter-spacing: -0.042em; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Reduced motion — respect user preference ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}