/* =====================================================================
   Base / reset — Top Tobacco Parts Inventory
   ===================================================================== */
@import 'variables.css';

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family:    var(--font-sans);
    font-size:      var(--font-size-md);
    line-height:    1.55;
    color:          var(--color-text);
    background:     var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

input, button, select, textarea {
    font-family: inherit;
    font-size:   inherit;
}

button { cursor: pointer; }

/* ── Utility classes ─────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.text-sm     { font-size: var(--font-size-sm); }
.text-xs     { font-size: var(--font-size-xs); }
.text-muted  { color: var(--color-text-muted); }
.text-right  { text-align: right; }
.text-center { text-align: center; }

.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── Loading spinner ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }

/* ── Fade animations ─────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn var(--transition-base) ease both; }