/* Use the bundled Inter family for consistent browser UI metrics. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterNormal.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: optional;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterBold.ttf") format("truetype");
  font-style: normal;
  font-weight: bold;
  font-display: optional;
}

/* Shared visual tokens mirrored from anonyway's web and native design system. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smoothly animate the shared surfaces when the theme changes. */
* {
  transition-property: background-color, border-color, fill, box-shadow;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: ease;
}

:root {
  --font-inter: "Inter";
  --theme-transition-duration: 0.3s;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #212121;
  --border-color: #dddddd;
  --focus-accent-color: #4aa3ff;
  --muted-text-color: #666666;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --text-primary: #ffffff;
  --border-color: #333333;
  --muted-text-color: #888888;
  color-scheme: dark;
}

html,
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
}

html {
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  height: 100%;
  width: 100%;
  font-family: var(--font-inter), system-ui, sans-serif;
}

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input,
textarea,
select,
button {
  line-height: inherit;
}

input,
textarea {
  caret-color: var(--focus-accent-color);
}

/* Prevent iOS Safari from zooming when a form control receives focus. */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}