/* Токены Свояка — источник правды для ТВ и телефона. Значения и смысл — DESIGN_SPEC.md. */
@import url("./fonts.css");

:root {
  color-scheme: dark;

  --ink-0: #0B0A09;
  --ink-1: #141210;
  --ink-2: #1D1A16;
  --ink-3: #2A2620;
  --line: rgba(243, 235, 221, 0.12);
  --line-strong: rgba(243, 235, 221, 0.24);

  --bone: #F3EBDD;
  --bone-2: #BDB3A2;
  --bone-3: #8F8677;

  --brass: #D9A441;
  --brass-hi: #F2C46B;
  --brass-lo: #8A6420;

  --cobalt: #1A3FA8;
  --cobalt-deep: #0E2466;
  --cobalt-hi: #3462E0;

  --ok: #4CC38A;
  --no: #E5534B;

  --pc-coral: #FF6B4A;
  --pc-mint: #3DD6A3;
  --pc-sky: #4CB6FF;
  --pc-lemon: #FFD23F;
  --pc-lilac: #B48CFF;
  --pc-rose: #FF6FB5;
  --pc-tangerine: #FF9A3D;
  --pc-teal: #22C7C2;
  --pc-lime: #A8E05F;
  --pc-sand: #E8C9A0;

  --font-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --font-text: "Golos Text", "Segoe UI", sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-pill: 999px;

  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);

  --focus: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--brass);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}

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

html,
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--bone);
  font-family: var(--font-text);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}