/* ApexRepairBench Marketing Styles
   Light, modern accents that complement Tailwind components
   Keep overrides minimal to avoid fighting Tailwind utilities
*/

:root {
  --brand-blue: #0066FF;
  --brand-navy: #0B1121;
  --accent-green: #10b981;
  --text-dark: #0f172a; /* slate-900-ish */
  --text-light: #64748b; /* slate-500-ish */
  --border-soft: rgba(15, 23, 42, 0.08);
  --shadow-soft: rgba(15, 23, 42, 0.12);
}

html, body, #root { height: 100%; }

/* Smooth transitions for nav state changes */
.nav-transition { transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease; }

/* Buttons: small polish beyond Tailwind defaults */
.btn-primary {
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
}
.btn-primary:hover {
  box-shadow: 0 12px 24px rgba(16, 185, 129, 0.35);
}

.btn-outline {
  border-radius: 12px;
  backdrop-filter: saturate(1.1);
}

/* Cards and surfaces used throughout content sections */
.card {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--shadow-soft);
  background: #fff;
}

/* Section headings and small badges */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-weight: 600;
}

/* Accessibility: consistent focus rings beyond Tailwind */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.55);
  border-radius: 8px;
}

/* Footer polish */
.footer-muted { color: var(--text-light); }

/* Optional utility to limit max width for custom components */
.container-narrow { max-width: 72rem; margin-inline: auto; }