@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrainsmono-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

:root {
  color-scheme: light;

  /* Brand primitives. These values come from the landing and are shared by
     both the public site and the product application. */
  --brand-paper: #f2f0e8;
  --brand-paper-deep: #e8e5db;
  --brand-ink: #11110f;
  --brand-ink-soft: #24271f;
  --brand-muted: #67675f;
  --brand-line: #cbc8bd;
  --brand-acid: #d8ff45;
  --brand-signal: #ff5b35;
  --brand-blue: #3157ff;
  --brand-white: #fffef8;

  /* Semantic colors. Components should consume these roles instead of the
     brand primitives above. */
  --bg: var(--brand-paper);
  --surface: var(--brand-white);
  --surface-subtle: var(--brand-paper-deep);
  --surface-inverse: var(--brand-ink);
  --surface-inverse-deep: #12130f;
  --surface-inverse-raised: #171713;
  --surface-inverse-hover: #20221c;
  --surface-overlay: rgb(12 14 10 / 72%);
  --fg: var(--brand-ink);
  --fg-secondary: var(--brand-ink-soft);
  --fg-muted: var(--brand-muted);
  --fg-inverse: var(--brand-white);
  --fg-inverse-muted: #aaa99f;
  --fg-inverse-subtle: #8f8e85;
  --fg-inverse-faint: #74766d;
  --border: var(--brand-line);
  --border-strong: var(--brand-ink);
  --border-inverse: #3b3b35;
  --border-inverse-soft: #36372f;

  /* Translucent structure and texture. */
  --ink-a02: rgb(17 17 15 / 2%);
  --ink-a03: rgb(17 17 15 / 3%);
  --ink-a04: rgb(17 17 15 / 4%);
  --ink-a07: rgb(17 17 15 / 7%);
  --ink-a12: rgb(17 17 15 / 12%);
  --ink-a15: rgb(17 17 15 / 15%);
  --ink-a35: rgb(17 17 15 / 35%);
  --paper-glass: rgb(242 240 232 / 88%);
  --signal-soft: rgb(255 91 53 / 13%);
  --acid-soft: rgb(216 255 69 / 10%);
  --acid-surface: rgb(216 255 69 / 18%);
  --focus-ring-soft: rgb(49 87 255 / 18%);

  /* Action colors. Acid means attention/action, not generic success. */
  --action-primary: var(--brand-acid);
  --action-primary-hover: #c9ef36;
  --action-primary-active: #b9de2b;
  --action-primary-shadow: #8eb21d;
  --action-on-primary: var(--brand-ink);
  --action-secondary: var(--brand-ink);
  --action-on-secondary: var(--brand-white);
  --action-signal: var(--brand-signal);
  --focus-ring: var(--brand-blue);
  --accent-danger-soft: #ff8b71;
  --accent-info-soft: #86a0ff;
  --accent-warning: #ffd45d;
  --accent-success-bright: #54c858;
  --fg-on-acid-muted: #4c503b;
  --fg-on-acid-secondary: #4a4d38;
  --fg-on-signal: #4f1d10;
  --fg-on-blue-muted: #d9dfff;

  /* Accessible semantic status pairs on the paper/surface backgrounds. */
  --status-success: #3f6500;
  --status-success-surface: #e4efc7;
  --status-warning: #8a4b00;
  --status-warning-surface: #f5e2bf;
  --status-danger: #a83218;
  --status-danger-surface: #fde3da;
  --status-info: #2446d8;
  --status-info-surface: #e0e6ff;
  --status-neutral: #565a52;
  --status-neutral-surface: #e6e4dc;

  /* Data and third-party identity. */
  --provider-yandex: #fc3f1d;
  --provider-on-yandex: var(--brand-white);
  --chart-line: #597d00;
  --chart-fill: rgb(89 125 0 / 16%);
  --chart-grid: rgb(17 17 15 / 10%);
  --chart-target: var(--brand-ink);
  --chart-marker: var(--brand-signal);

  /* Typography. Font files are served beside this stylesheet from ./fonts/. */
  --font-display: "Manrope", "Manrope Variable", sans-serif;
  --font-body: "Manrope", "Manrope Variable", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
  --text-display-hero: clamp(3.6rem, 6.5vw, 6.4rem);
  --text-display-section: clamp(2.5rem, 5.3vw, 5rem);
  --text-display-price: clamp(4.6rem, 8vw, 7.2rem);
  --text-app-page: 2.5rem;
  --text-app-section: clamp(1.5rem, 2.5vw, 2rem);
  --text-app-component: 1.25rem;
  --text-app-metric: clamp(2rem, 3vw, 2.5rem);
  --leading-tight: 1.1;
  --leading-body: 1.55;
  --tracking-display: -0.045em;
  --tracking-label: 0.08em;

  /* Shared 4px spatial rhythm. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(5.875rem, 11vw, 9.375rem);

  /* Application and landing composition. */
  --container-max: 90rem;
  --landing-container-max: 73.75rem;
  --container-gutter-desktop: 2rem;
  --container-gutter-tablet: 1.5rem;
  --container-gutter-phone: 1rem;
  --sidebar-width: 14rem;
  --sidebar-rail-width: 4.5rem;
  --app-content-max: 90rem;
  --app-topbar-height: 4.25rem;
  --app-bottom-nav-height: 4.5rem;
  --control-height: 2.75rem;
  --control-height-lg: 3rem;

  /* Geometry and elevation. */
  --border-thin: 1px;
  --border-accent: 3px;
  --focus-outline: 3px;
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-pill: 999px;
  --elevation-flat: none;
  --elevation-border: 0 0 0 1px var(--border);
  --elevation-raised: 0 0.75rem 2.5rem rgb(17 17 15 / 10%);
  --elevation-press: 0 0.25rem 0 var(--action-primary-shadow);
  --elevation-hard-sm: 0.1875rem 0.1875rem 0 var(--border-strong);
  --elevation-hard-md: 0.3125rem 0.3125rem 0 var(--border-strong);
  --elevation-hard-lg: 0.875rem 0.875rem 0 var(--border-strong);
  --elevation-dialog: 0 1.5rem 5rem rgb(17 17 15 / 28%);

  /* Interaction. */
  --motion-exit: 120ms;
  --motion-fast: 160ms;
  --motion-enter: 200ms;
  --motion-reveal: 700ms;
  --motion-pulse: 1800ms;
  --motion-marquee: 24s;
  --motion-marquee-mobile: 18s;
  --motion-progress: 1800ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);

}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-exit: 1ms;
    --motion-fast: 1ms;
    --motion-enter: 1ms;
  }
}

@media (max-width: 47.5rem) {
  :root {
    --text-display-hero: clamp(3rem, 14vw, 5rem);
    --text-display-section: clamp(2.5rem, 12vw, 4rem);
    --text-display-price: clamp(4.2rem, 21vw, 6.5rem);
    --text-app-page: 1.75rem;
  }
}

@media (min-width: 47.5rem) and (max-width: 74.9375rem) {
  :root {
    --text-app-page: 2rem;
  }
}