/* Harpenin Mobile Web - Responsive Styling */

/* ============================================
   Font Loading
   Standard names (Manrope, Spline Sans) are loaded
   via Google Fonts <link> tags in +html.tsx and
   index.html. Those <link> tags provide proper
   @font-face rules with correct font-weight
   descriptors for standard names.

   The @font-face aliases below register expo-font
   names (e.g. Manrope_700Bold) for the ~320 inline
   fontFamily hardcodes across the codebase.

   KEY FIX: font-weight: 100 900 (range) makes each
   alias match ANY requested weight.  This fixes the
   CSS specificity issue where React Native Web merges
   a Typography token (fontWeight: "400") with an
   inline fontFamily override ("Manrope_700Bold"),
   producing font-family: Manrope_700Bold + font-weight:
   400 — which previously didn't match a @font-face with
   font-weight: 700, causing fallback to serif.
   ============================================ */

@font-face {
  font-family: 'SplineSans_600SemiBold';
  src: url(https://fonts.gstatic.com/s/splinesans/v16/_6_sED73Uf-2WfU2LzycEZousNzn1a1lKWRp5l7YEg.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'SplineSans_700Bold';
  src: url(https://fonts.gstatic.com/s/splinesans/v16/_6_sED73Uf-2WfU2LzycEZousNzn1a1lKWRp317YEg.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope_400Regular';
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FO_F.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope_500Medium';
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope_600SemiBold';
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE-_F.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope_700Bold';
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.ttf) format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* ============================================
   Theme Variables (from App theme)
   ============================================ */

:root {
  color-scheme: light dark;
  --surface-primary: #ffffff;
  --surface-secondary: #f6f8fc;
  --accent: #ee9d24;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-primary: #111111;
    --surface-secondary: #1a1a1a;
    --accent: #ee9d24;
  }
}

/* ============================================
   Base Reset & Mobile-First Styling
   ============================================ */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--surface-secondary);
  font-family: 'Manrope', 'Spline Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

#app-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-family: 'Manrope', 'Spline Sans', sans-serif;
}

/* Override React Native Web's system font default on elements
   that don't have an explicit fontFamily.  :where() has zero
   specificity so any StyleSheet.create font-family wins. */
#root :where(div), #root :where(span) {
  font-family: inherit;
}

/* ============================================
   High Resolution Display Support
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

/* ============================================
   Accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

input, select, textarea {
  font-size: 16px !important;
}