/* Generated by funnel/build.js from design-system/tokens.css and design-system/index.html. Do not edit. */
/* Здраве и пари: design tokens. Source of truth: the block between the TOKENS markers in index.html. */
:root {
  /* colour: ink and white carry everything. The signal colour (rose) marks "beyond" and stays under ~6% of any layout */
  --white: #FFFFFF;
  --mist: #EEF3F3;
  --ink-100: #E4EBEC;
  --ink-200: #D4DEE0;
  --ink-300: #9FB4BA;
  --ink-500: #5B7279;
  --ink-600: #44595F;
  --ink-800: #12303A;
  --ink-900: #0A1A20;
  --signal-100: #FFE6EE;
  --signal-300: #FF5A8C;   /* on ink */
  --signal-600: #CC2B66;   /* on white and mist */
  /* type: one family, two widths */
  --font-display: "Sofia Sans Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-text: "Sofia Sans", "Segoe UI", Arial, sans-serif;
  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  /* unit: 1px by default; frames below redefine it so a layout is authored in its real pixels */
  --u: 1px;
}

/* ---------- brand pieces ---------- */
.wm { font-family: var(--font-text); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.wm .d { display: inline-block; width: .17em; height: .17em; border-radius: 50%; background: var(--signal-600); margin-left: .07em; }
.dk .wm .d, .wm.on-dk .d { background: var(--signal-300); }
.hl { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lt .r { color: var(--signal-600); }
.dk .r { color: var(--signal-300); }
.body { font-weight: 400; color: var(--ink-600); }
.dk .body { color: var(--ink-200); }
.bar { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); border-radius: 9999px; background: var(--c, var(--ink-900)); }
.pt { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--d)); height: calc(var(--u) * var(--d)); border-radius: 50%; background: var(--c, var(--signal-600)); }
.dk .pt { --c: var(--signal-300); }
.num { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: lining-nums; }

/* mark: a bar and a dot raised beyond it */
.mk { --m: 10px; display: inline-block; position: relative; width: calc(var(--m) * 5.6); height: calc(var(--m) * 2.3); }
.mk b { position: absolute; left: 0; bottom: 0; width: calc(var(--m) * 3.6); height: calc(var(--m) * 1.1); border-radius: 9999px; background: var(--bar, var(--ink-900)); }
.mk i { position: absolute; right: 0; top: 0; width: calc(var(--m) * 1.5); height: calc(var(--m) * 1.5); border-radius: 50%; background: var(--dot, var(--signal-600)); }
.on-dk .mk, .mk.on-dk { --bar: var(--white); --dot: var(--signal-300); }

/* ---------- components (sized in --u so they work at any scale) ---------- */
.btn { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 24); border-radius: 9999px;
  font-family: var(--font-text); font-weight: 700; font-size: calc(var(--u) * 18); letter-spacing: -.005em; white-space: nowrap; transition: background var(--t-fast) var(--ease); }
.btn svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; }
.btn--ink { background: var(--ink-900); color: var(--white); }
.btn--ink:hover { background: var(--ink-800); }
.btn--white { background: var(--white); color: var(--ink-900); }
.btn--line { border: calc(var(--u) * 1.5) solid var(--ink-900); color: var(--ink-900); }
.opt { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 60); padding: 0 calc(var(--u) * 20);
  border: calc(var(--u) * 1.5) solid var(--ink-200); border-radius: calc(var(--u) * 18); font-size: calc(var(--u) * 18); font-weight: 500; background: var(--white); color: var(--ink-900); }
.opt.on { background: var(--ink-900); border-color: var(--ink-900); color: var(--white); }
.opt.on::after { content: ""; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: var(--signal-300); }
.opt.focus { outline: calc(var(--u) * 3) solid var(--signal-600); outline-offset: calc(var(--u) * 2); }
.pgw { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.pg { position: relative; flex: 1; height: calc(var(--u) * 8); border-radius: 9999px; background: var(--ink-200); }
.pg i { position: absolute; inset: 0 auto 0 0; border-radius: 9999px; background: var(--ink-900); }
.pgd { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: var(--signal-600); flex: none; }
.fld label { display: block; font-size: calc(var(--u) * 14); font-weight: 600; color: var(--ink-600); margin-bottom: calc(var(--u) * 6); }
.fld .ip { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 16);
  border: calc(var(--u) * 1.5) solid var(--ink-200); border-radius: calc(var(--u) * 14); font-size: calc(var(--u) * 18); background: var(--white); color: var(--ink-900); }
.fld .ip .pre { color: var(--ink-600); padding-right: calc(var(--u) * 12); border-right: 1px solid var(--ink-200); }
.fld .ip .ph { color: var(--ink-500); }
.fld .ip.focus { border-color: var(--ink-900); outline: calc(var(--u) * 3) solid var(--signal-600); outline-offset: calc(var(--u) * 2); }
.fld .ip.err { border-color: var(--signal-600); }
.fld .msg { font-size: calc(var(--u) * 13.5); color: var(--signal-600); margin-top: calc(var(--u) * 6); font-weight: 500; }
.chk { display: flex; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 14.5); line-height: 1.4; color: var(--ink-600); }
.chk i { flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border: calc(var(--u) * 1.5) solid var(--ink-900); border-radius: calc(var(--u) * 7); margin-top: calc(var(--u) * 1); background: var(--white); }
.chk u { color: var(--ink-900); text-underline-offset: 2px; }
.card { background: var(--white); border-radius: calc(var(--u) * 24); border: calc(var(--u) * 1) solid var(--ink-200); padding: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 22); color: var(--ink-900); }
.card .ct { font-size: calc(var(--u) * 15); font-weight: 600; color: var(--ink-600); }
.rr { margin-top: calc(var(--u) * 18); }
.rr .t { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--u) * 18); font-weight: 600; }
.rr .t span { font-size: calc(var(--u) * 15); font-weight: 500; color: var(--ink-600); }
.trk { position: relative; height: calc(var(--u) * 12); margin-top: calc(var(--u) * 10); border-radius: 9999px; background: var(--ink-100); }
.trk .gap { position: absolute; top: 0; bottom: 0; border-radius: 9999px; background: var(--signal-100); }
.trk .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9999px; background: var(--ink-900); }
.trk .tg { position: absolute; top: 50%; width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin: calc(var(--u) * -10) 0 0 calc(var(--u) * -10); border-radius: 50%; background: var(--signal-600); box-shadow: 0 0 0 calc(var(--u) * 3) var(--white); }
.disc { font-size: calc(var(--u) * 13); line-height: 1.45; color: var(--ink-600); border-top: 1px solid var(--ink-200); padding-top: calc(var(--u) * 12); }
.disc u { color: var(--ink-900); text-underline-offset: 2px; }