/* Bordr design tokens — mirror of the iOS app's BordrTheme. */
:root {
  --ground: #f7f5f2;
  --card: #ffffff;
  --ink: #16181e;
  --ink-2: #736e66;
  --track: #ece9e4;
  --line: rgba(22, 24, 30, 0.08);
  --accent: #a8664a;
  --accent-soft: rgba(168, 102, 74, 0.12);
  --premium: #f6e5c7;
  --success: #21804a;
  --warning: #c24008;
  --warning-fill: #ed7321;
  --shadow: 0 1px 2px rgba(22, 24, 30, 0.04), 0 8px 28px rgba(22, 24, 30, 0.07);
  --shadow-lg: 0 2px 6px rgba(22, 24, 30, 0.05), 0 30px 70px rgba(22, 24, 30, 0.14);

  --serif: "New York", ui-serif, "Newsreader", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;

  --r-card: 24px;
  --r-tile: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #171615;
    --card: #282624;
    --ink: #f1eee8;
    --ink-2: #a39c91;
    --track: #37342f;
    --line: rgba(241, 238, 232, 0.09);
    --accent: #db9e80;
    --accent-soft: rgba(219, 158, 128, 0.14);
    --premium: #403626;
    --success: #4cb877;
    --warning: #f08a4b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #171615;
  --card: #282624;
  --ink: #f1eee8;
  --ink-2: #a39c91;
  --track: #37342f;
  --line: rgba(241, 238, 232, 0.09);
  --accent: #db9e80;
  --accent-soft: rgba(219, 158, 128, 0.14);
  --premium: #403626;
  --success: #4cb877;
  --warning: #f08a4b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.serif { font-family: var(--serif); font-weight: 400; }

/* Round country flag, like CountryBadge in the app. */
.flag {
  display: inline-block;
  flex: none;
  width: var(--s, 28px);
  height: var(--s, 28px);
  border-radius: 50%;
  background: var(--track) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}