@font-face {
  font-family: 'BrighterSands';
  src: url('../fonts/brightersans-regular.otf') format('opentype'),
       url('../fonts/BrighterSands-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BrighterSands';
  src: url('../fonts/brightersans-medium.otf') format('opentype'),
       url('../fonts/BrighterSands-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BrighterSands';
  src: url('../fonts/brightersans-bold.otf') format('opentype'),
       url('../fonts/BrighterSands-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: 'BrighterSands', sans-serif;
  touch-action: pan-y;
}

body {
  font-family: 'BrighterSands', sans-serif;
  touch-action: pan-y;
}

/* Prevent iOS auto-zoom on all form inputs */
input, textarea, select {
  font-size: 16px !important;
  touch-action: manipulation;
}

body.font-sans,
.font-sans {
  font-family: 'BrighterSands', sans-serif !important;
}

.upload-zone {
  border: 2px dashed rgba(148, 163, 184, 0.9);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.upload-zone:hover {
  border-color: rgba(226, 74, 24, 0.65);
}

.dark .upload-zone {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(12, 11, 11, 0.4);
}

.dark .upload-zone:hover {
  border-color: rgba(226, 74, 24, 0.6);
}

.dark body {
  background-color: #0c0b0b !important;
  color: #f8fafc;
}

/* Ensure inputs in dark mode never turn white on focus or obscure typed text */
.dark input,
.dark textarea,
.dark select {
  color-scheme: dark;
}

.dark input:focus,
.dark textarea:focus {
  background-color: #202024 !important;
  color: #ffffff !important;
  border-color: #e24a18 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
