:root {
  color-scheme: light;
}

html,
body,
#root {
  background-color: #e8e5db;
}

/* Gray parchment: three overlapping soft radials in warm-greys give the base
   a hand-made, paper-ish quality without being busy. Attached to the body so
   it stays fixed while content scrolls. */
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  color: #1d2033;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
  background-color: #e8e5db;
  background-image:
    radial-gradient(ellipse 90% 70% at 15% 20%, rgba(214, 210, 200, 0.55), transparent 70%),
    radial-gradient(ellipse 80% 60% at 88% 12%, rgba(194, 190, 180, 0.38), transparent 70%),
    radial-gradient(ellipse 110% 80% at 50% 95%, rgba(180, 176, 166, 0.35), transparent 70%),
    radial-gradient(circle at 75% 60%, rgba(230, 228, 220, 0.5), transparent 55%);
  background-attachment: fixed;
}

::selection {
  background: rgba(36, 54, 89, 0.22);
  color: #1d2033;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d6d1c1;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b9b3a0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

input,
textarea {
  font-family: inherit;
}

/* Chip strip: hide the horizontal scrollbar (RN Web's
   showsHorizontalScrollIndicator can't do this alone) and let the row's
   vertical overflow be visible so pill borders aren't clipped. */
#cortex-chip-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  overflow-y: visible;
}
#cortex-chip-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}