/* Critical CSS for Above-the-Fold Content */
/* This loads immediately to prevent FOUC and improve LCP */

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

html {
  -webkit-text-size-adjust: 100%;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Heebo', sans-serif;
  line-height: 1.5;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Heebo', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Loading spinner for initial load */
.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* RTL Support */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

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

/* Accessibility - Touch Targets (min 48x48px on mobile) */
@media (max-width: 768px) {
  button,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"] {
    min-height: 48px;
    min-width: 48px;
    padding: max(12px, var(--padding-y, 8px)) max(12px, var(--padding-x, 12px));
  }

  /* Icon buttons specifically */
  button:not(:has(span)):not(:has(div)),
  [aria-label]:not(:has(span)):not(:has(div)) {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Focus visible styles */
*:focus-visible {
  outline: 3px solid #3B82F6;
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #3B82F6;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}