/* ============================================================================
   RESET & BASE STYLES - Browser Normalization & Body Defaults
   ============================================================================

   CSS resets and base body/html styles.
   Loaded as critical CSS (synchronously).

   Migrated from: components/styles/base.css (reset + body sections)
   ============================================================================ */

/* ============================================================================
   CSS RESETS - Universal Box Sizing & Browser Normalization
   ============================================================================ */

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* ============================================================================
   HTML & BODY - Base Layout
   ============================================================================ */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: pan-x pan-y;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  padding-top: 0;
}

/* ============================================================================
   BROWSER-SPECIFIC RESETS
   ============================================================================ */

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

::file-selector-button {
  font: inherit;
  appearance: button;
}

/* ============================================================================
   GLASSMORPHISM EFFECT - Reusable Frosted Glass UI
   ============================================================================ */

.glass-effect {
  -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
  backdrop-filter: blur(var(--panel-backdrop-blur));
  background: var(--surface-hover);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-glass);
}

/* ============================================================================
   NOSCRIPT OVERLAY
   ============================================================================ */

.noscript-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 400px;
  z-index: 10000;
}