/*! Jost — Copyright 2020 The Jost Project Authors. SIL Open Font License 1.1, see fonts/OFL.txt */
@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-wght.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
 * The one visual source for the Mini App and the public documents: both link
 * this file. [data-theme] follows the Telegram host in the app; the documents
 * have no script and follow the system scheme through :root.
 */
:root {
  --rv-font-display:
    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --rv-font-text:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --rv-size-display: 1.625rem;
  --rv-size-title: 1.125rem;
  --rv-size-body: 1rem;
  --rv-size-small: 0.875rem;
  --rv-size-label: 0.75rem;

  --rv-space-1: 0.25rem;
  --rv-space-2: 0.5rem;
  --rv-space-3: 0.75rem;
  --rv-space-4: 1rem;
  --rv-space-5: 1.25rem;
  --rv-space-6: 1.5rem;
  --rv-radius-control: 0.75rem;
  --rv-radius-pill: 0.8125rem;
  --rv-motion: 150ms ease-out;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root,
[data-theme="light"] {
  --rv-bg: #f6f7f9;
  --rv-surface: #ffffff;
  --rv-surface-2: #eceef2;
  --rv-text: #1f2329;
  --rv-hint: #565d69;
  --rv-separator: #dcdfe5;
  --rv-accent: #4338ca;
  --rv-accent-hover: #3730a3;
  --rv-on-accent: #ffffff;
  --rv-accent-soft: #e7e8fb;
  --rv-accent-ink: #3730a3;
  --rv-selection: #c9cdf8;
  --rv-placeholder-bg: #e7e8fb;
  --rv-placeholder-text: #312e81;
  color-scheme: light;
}

[data-theme="dark"] {
  --rv-bg: #121419;
  --rv-surface: #1a1d24;
  --rv-surface-2: #242832;
  --rv-text: #e9ebef;
  --rv-hint: #a3a9b5;
  --rv-separator: #2f343f;
  --rv-accent: #a5b4fc;
  --rv-accent-hover: #c7d2fe;
  --rv-on-accent: #14161c;
  --rv-accent-soft: #262a4d;
  --rv-accent-ink: #c7d2fe;
  --rv-selection: #3a3f78;
  --rv-placeholder-bg: #2d3163;
  --rv-placeholder-text: #dfe3ff;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-theme="system"] {
    --rv-bg: #121419;
    --rv-surface: #1a1d24;
    --rv-surface-2: #242832;
    --rv-text: #e9ebef;
    --rv-hint: #a3a9b5;
    --rv-separator: #2f343f;
    --rv-accent: #a5b4fc;
    --rv-accent-hover: #c7d2fe;
    --rv-on-accent: #14161c;
    --rv-accent-soft: #262a4d;
    --rv-accent-ink: #c7d2fe;
    --rv-selection: #3a3f78;
    --rv-placeholder-bg: #2d3163;
    --rv-placeholder-text: #dfe3ff;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rv-motion: 0s;
  }
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--rv-selection);
  color: var(--rv-text);
}

/* Drawn outside the control with a 2px gap, so it contrasts with the surface around it. */
:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 2px;
}

/*
 * Text only: heavy graphite «r» and «d» around a light indigo «2», set tight.
 * Inline blocks keep the letter boxes identical at every size (the intro lands on them).
 */
.brand-mark {
  display: inline-block;
  max-inline-size: 100%;
  font-family: var(--rv-font-display);
  font-size: clamp(1.5rem, 7vw, 1.75rem);
  font-feature-settings: "ss01";
  font-kerning: normal;
  line-height: 1.1;
  text-rendering: geometricPrecision;
  white-space: nowrap;
}

.brand-mark__lead,
.brand-mark__accent {
  display: inline-block;
}

.brand-mark__lead {
  color: var(--rv-text);
  font-weight: 760;
  letter-spacing: -0.055em;
}

/* Enlarged so its top meets the ascender of «d»; line-height keeps the mark's box unchanged. */
.brand-mark__accent {
  color: var(--rv-accent);
  font-size: 1.08em;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}