/* ============================================================
   TRON MOTORS — utilities.css
   ============================================================ */

/* ── Display ── */
.d-none  { display: none; }
.d-block { display: block; }
.d-flex  { display: flex; }
.d-grid  { display: grid; }
@media (max-width: 960px) { .d-none-mobile  { display: none !important; } }
@media (min-width: 961px) { .d-none-desktop { display: none !important; } }
@media (max-width: 1024px){ .d-none-tablet  { display: none !important; } }

/* ── Margin ── */
.m-0  { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-1  { margin-top: var(--space-1); } .mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); } .mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); } .mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10);} .mt-12 { margin-top: var(--space-12);}
.mb-1  { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10);} .mb-12{ margin-bottom: var(--space-12);}

/* ── Padding ── */
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12{ padding-top: var(--space-12);padding-bottom: var(--space-12);}
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

/* ── Cores de texto ── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-faint     { color: var(--text-faint); }
.text-accent    { color: var(--accent); }
.text-white     { color: #fff; }
.text-dark      { color: var(--gray-900); }

/* ── Fontes ── */
.font-display  { font-family: var(--font-display); }
.font-mono     { font-family: var(--font-mono); }
.font-bold     { font-weight: var(--weight-bold); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-medium   { font-weight: var(--weight-medium); }
.uppercase     { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.08em; }

/* ── Tamanhos de texto ── */
.text-xs  { font-size: var(--text-xs);  }
.text-sm  { font-size: var(--text-sm);  }
.text-md  { font-size: var(--text-md);  }
.text-lg  { font-size: var(--text-lg);  }
.text-xl  { font-size: var(--text-xl);  }
.text-2xl { font-size: var(--text-2xl); }

/* ── Bordas ── */
.border        { border: 1px solid var(--border-base); }
.border-light  { border: 1px solid var(--border-light); }
.border-top    { border-top: 1px solid var(--border-light); }
.border-bottom { border-bottom: 1px solid var(--border-light); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-full  { border-radius: var(--radius-full); }

/* ── Fundos ── */
.bg-white       { background: var(--white); }
.bg-gray-50     { background: var(--gray-50); }
.bg-gray-100    { background: var(--gray-100); }
.bg-accent-light{ background: var(--accent-light); }

/* ── Sombras ── */
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-card { box-shadow: var(--shadow-card); }

/* ── Misc ── */
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only       { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.pointer-none  { pointer-events: none; }
.select-none   { user-select: none; }

/* ── Animações ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Alias kebab-case — usado via JS (toast animation) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.animate-fade-up { animation: fadeUp  0.5s var(--ease-out) both; }
.animate-fade-in { animation: fadeIn  0.4s var(--ease-out) both; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* ── Fallback no-js ── */
/* Garante que .reveal seja visível se JS não carregar */
.no-js .reveal { opacity: 1 !important; transform: none !important; }