@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --green-brand: #1a5c2a;
  --green-mid: #2d7a3e;
  --green-light: #e8f5ec;
  --amber-brand: #f5a623;
  --amber-light: #fff8ec;
  --red-super: #e02020;
  --blue-super: #003087;
  --teal-super: #00539f;
  --text-primary: #1a1a1a;
  --text-muted: #6b7280;
  --border-subtle: #e5e7eb;
  --bg-page: #ffffff;
  --bg-section: #f9fafb;
}

html {
  font-family: "DM Sans", sans-serif;
  color: var(--text-primary);
  height: 100%;
}

body {
  background-color: var(--bg-page);
  overflow-x: clip;
  height: 100%;
  margin: 0;
}

#root,
[data-expo-root] {
  overflow-x: clip;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Safari / narrow viewports: nested ScrollViews need a bounded flex chain */
[data-expo-root] > div {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.font-display {
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.1;
}

.price {
  font-weight: 600;
  color: var(--green-brand);
}

/* Focus rings (WCAG-friendly)  -  complements RN focus styles on web */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="switch"]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--green-brand);
  outline-offset: 2px;
}

.foodly-transition {
  transition: all 200ms ease;
}

/* Homepage marketing motion (HomeLandingPage) */
:root {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  [data-home-cta="true"] {
    transition: transform 140ms var(--ease-out-quint), box-shadow 140ms var(--ease-out-quint);
  }

  [data-home-cta="true"]:hover {
    transform: translateY(-1px);
  }

  [data-home-cta="true"]:active {
    transform: translateY(0);
    transition-duration: 80ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-home-cta="true"] {
    transition: none;
  }
}