/* Tokens and fonts shared by the display and the control panel. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  /* Turkish needs this file: ğ Ğ ş Ş İ */
  unicode-range: U+0100-0130, U+0132-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #090b10;
  --bg-raised: #12151d;
  --bg-raised-2: #1a1e29;
  --line: #262b39;
  --text: #f5f7fb;
  --text-2: #a4acbf;
  --text-3: #6d7588;
  --go: #27e38e;
  --go-ink: #03210f;
  --hold: #ffb224;
  --hold-ink: #2b1b00;
  --danger: #ff4d5e;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 18px;
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #f4f5f8;
  --bg-raised: #ffffff;
  --bg-raised-2: #e9ebf1;
  --line: #d4d8e2;
  --text: #0a0d14;
  --text-2: #3f4656;
  --text-3: #636b7d;
  --go: #059a57;
  --go-ink: #ffffff;
  --hold: #b86e00;
  --hold-ink: #ffffff;
  --danger: #d11a2a;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'tnum', 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, var(--text-3)) 20%, transparent);
  color: color-mix(in srgb, var(--accent, var(--text-3)) 72%, var(--text));
  font-weight: 650;
  white-space: nowrap;
}

.chip::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--accent, var(--text-3));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}