@import "tailwindcss";
@theme {
--color-innodb-blue: #3b82f6;
--color-innodb-cyan: #22d3ee;
--color-innodb-green: #10b981;
--color-innodb-red: #ef4444;
--color-innodb-amber: #f59e0b;
--color-surface-1: #0f172a;
--color-surface-2: #1e293b;
--color-surface-3: #334155;
}
.hex-offset { color: var(--color-innodb-cyan); }
.hex-byte { color: var(--color-innodb-green); }
.hex-ascii { color: var(--color-innodb-amber); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface-1); }
::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
.badge-valid { background: #065f46; color: #6ee7b7; }
.badge-invalid { background: #7f1d1d; color: #fca5a5; }
.badge-empty { background: #1e293b; color: #94a3b8; }
.tab-active {
border-bottom: 2px solid var(--color-innodb-cyan);
color: var(--color-innodb-cyan);
}
.dropzone-active {
border-color: var(--color-innodb-cyan);
background: rgba(34, 211, 238, 0.05);
}
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 100;
}
.skip-link:focus {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 0.5rem 1rem;
background: var(--color-innodb-cyan);
color: #0f172a;
font-weight: bold;
font-size: 0.875rem;
z-index: 100;
}
:focus-visible {
outline: 2px solid var(--color-innodb-cyan);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.animate-spin { animation: none; }
* { transition-duration: 0.01ms !important; }
}
@media (prefers-contrast: high) {
.border-gray-800, .border-gray-800\/30, .border-gray-800\/50 {
border-color: #9ca3af;
}
.text-gray-500, .text-gray-600 { color: #d1d5db; }
}
@media (pointer: coarse) {
button, [role="tab"], label {
min-height: 44px;
min-width: 44px;
}
nav { scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
nav { scroll-snap-type: x mandatory; }
nav button { scroll-snap-align: start; }
}