/* BonusBank kit.css — shared design tokens + components for bonusbank.org.
   Used by the Vue landing AND by Go service-page templates (/g/…, /pay, /password-reset, 404…).
   Mirrors the app kit (app/lib/ui/kit, docs/design-system.md): thick ink outlines, two-tone 3D
   buttons with a solid bottom shadow, Nunito 800/900, cream paper panels, pastel gradient.
   Served unhashed at /kit.css — keep class names stable, they are a public contract. */

/* ---------- Fonts (Nunito variable, OFL — see /fonts/OFL-Nunito.txt) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens */
:root {
  --ink: #2d2250;
  --ink-sh: rgba(45, 34, 80, .35);
  --ink-soft: rgba(45, 34, 80, .12);
  --paper: #fff8ec;
  --paper-2: #fff1da;
  --card: #fff;
  --muted: #7a6f99;          /* decorative / large text only */
  --text-2: #554a7c;         /* secondary body text: 7:1 on paper */
  --bg-top: #8ec5ff;
  --bg-bottom: #ffb3d9;
  --bg-grad: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));

  --green-1: #6fe37f; --green-2: #3fcb5c;
  --red-1: #ff8484;   --red-2: #f2525d;
  --blue-1: #6cc3ff;  --blue-2: #3f9cf5;
  --purple-1: #c39bff; --purple-2: #9a6bf2;
  --gold-1: #ffe07a;  --gold-2: #ffc12e;
  --orange-1: #ffb366; --orange-2: #ff8a2b;
  --pink-1: #ffa3cd;  --pink-2: #ff6fae;
  --money-pos: #1f9a3e; --money-neg: #e23b4a;
  --focus: #ffd23f;

  --r-btn-sm: 14px; --r-btn: 18px; --r-card: 22px; --r-win: 30px; --r-input: 16px; --r-pill: 24px;
  --bw: 3px; --bw-thick: 4px;
  --sh-btn: 5px; --sh-card: 5px;
  --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 20px; --sp-5: 32px; --sp-6: 48px; --sp-7: 72px; --sp-8: 112px;

  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-small: 14px; --fs-body: 17px; --fs-lead: clamp(18px, 1.2vw + 13px, 22px);
  --fs-h1: clamp(36px, 4.2vw + 14px, 68px);
  --fs-h2: clamp(30px, 2.6vw + 16px, 50px);
  --fs-h3: clamp(20px, .5vw + 17px, 24px);

  --dur-press: 80ms; --dur: 220ms;
  --ease-spring: cubic-bezier(.2, 1.4, .4, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-weight: 700; font-size: var(--fs-body); line-height: 1.55;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, picture, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(ul, ol).k-plain { list-style: none; margin: 0; padding: 0; }

/* Keyboard focus: thick gold ring (like the app), never removed. */
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
:focus:not(:focus-visible) { outline: none; }

.k-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.k-skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: var(--r-btn-sm);
  background: var(--card); border: var(--bw) solid var(--ink); font-weight: 900; text-decoration: none; transition: top .15s;
}
.k-skip:focus-visible { top: 12px; }

/* ---------- Outlined text: white with ink outline — ONLY on saturated plates. */
.outlined, .k-btn--green, .k-btn--blue, .k-btn--red, .k-btn--purple, .k-btn--pink, .k-btn--orange, .k-head {
  color: #fff;
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink),
    1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 3.5px 0 var(--ink);
}
.outlined--lg {
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink),
    2.2px 2.2px 0 var(--ink), -2.2px 2.2px 0 var(--ink), 2.2px -2.2px 0 var(--ink), -2.2px -2.2px 0 var(--ink), 0 5px 0 var(--ink);
}

/* ---------- 3D button (<a> or <button>) */
.k-btn {
  --b1: var(--blue-1); --b2: var(--blue-2);
  appearance: none; -webkit-appearance: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; margin: 0 0 var(--sh-btn);
  border: var(--bw) solid var(--ink); border-radius: var(--r-btn);
  background: linear-gradient(var(--b1) 0 50%, var(--b2) 50% 100%);
  box-shadow: 0 var(--sh-btn) 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .35);
  font-family: var(--font); font-size: 20px; font-weight: 900; line-height: 1.1; letter-spacing: .2px;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, filter .15s;
}
.k-btn:hover { filter: brightness(1.05) saturate(1.05); }
.k-btn:active, .k-btn.is-down { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .35); }
.k-btn:focus-visible { outline-offset: 4px; border-radius: var(--r-btn); }
.k-btn svg { width: 1.3em; height: 1.3em; flex: none; }
.k-btn--green { --b1: var(--green-1); --b2: var(--green-2); }
.k-btn--blue { --b1: var(--blue-1); --b2: var(--blue-2); }
.k-btn--red { --b1: var(--red-1); --b2: var(--red-2); }
.k-btn--purple { --b1: var(--purple-1); --b2: var(--purple-2); }
.k-btn--pink { --b1: var(--pink-1); --b2: var(--pink-2); }
.k-btn--orange { --b1: var(--orange-1); --b2: var(--orange-2); }
/* Gold/white are light plates → ink label (contrast), like the app's "Потратить". */
.k-btn--gold { --b1: var(--gold-1); --b2: var(--gold-2); color: var(--ink); }
.k-btn--white { --b1: #fff; --b2: #eef0ff; color: var(--ink); }
.k-btn--sm { min-height: 44px; padding: 0 16px; font-size: 17px; border-radius: var(--r-btn-sm); --sh-btn: 4px; }
.k-btn--big { min-height: 62px; padding: 0 36px; font-size: 22px; }
.k-btn--block { display: flex; width: 100%; }
.k-btn[disabled], .k-btn[aria-disabled='true'] { filter: grayscale(.85); opacity: .6; cursor: default; pointer-events: none; }

/* Round 3D button (close/back/FAB). */
.k-round {
  --b1: var(--blue-1); --b2: var(--blue-2);
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; margin: 0 0 4px;
  border-radius: 50%; border: var(--bw) solid var(--ink); background: linear-gradient(var(--b1) 0 50%, var(--b2) 50% 100%);
  box-shadow: 0 4px 0 var(--ink); color: #fff; cursor: pointer; transition: transform var(--dur-press), box-shadow var(--dur-press);
}
.k-round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.k-round--red { --b1: var(--red-1); --b2: var(--red-2); }
.k-round--green { --b1: var(--green-1); --b2: var(--green-2); }

/* ---------- Surfaces */
.k-card {
  position: relative; background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--r-card);
  box-shadow: 0 var(--sh-card) 0 var(--ink-sh); padding: var(--sp-4);
}
a.k-card, button.k-card { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform .12s var(--ease-out); }
a.k-card:active, button.k-card:active { transform: scale(.98); }

.k-panel {
  position: relative; background: var(--paper); border: var(--bw-thick) solid var(--ink); border-radius: var(--r-win);
  box-shadow: 0 8px 0 var(--ink); overflow: hidden;
}
.k-panel__body { padding: var(--sp-4) clamp(16px, 3vw, 28px) clamp(20px, 3vw, 28px); }

/* Two-tone header bar (KAppBar / window head). Text inside is outlined white. */
.k-head {
  --h1: var(--blue-1); --h2: var(--blue-2);
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 20px;
  background: linear-gradient(var(--h1) 0 55%, var(--h2) 55% 100%); border-bottom: var(--bw-thick) solid var(--ink);
  font-size: 24px; font-weight: 900; line-height: 1.15;
}
.k-head--green { --h1: #7fe59a; --h2: #3fca6a; }
.k-head--pink { --h1: var(--pink-1); --h2: var(--pink-2); }
.k-head--gold { --h1: #ffd76b; --h2: #f5a623; }
.k-head--purple { --h1: #c7a2ff; --h2: var(--purple-2); }
.k-head--orange { --h1: var(--orange-1); --h2: var(--orange-2); }
.k-head--red { --h1: var(--red-1); --h2: var(--red-2); }
.k-head > svg, .k-head > img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 3px 0 rgba(45, 34, 80, .35)); }

/* Pills / chips */
.k-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 2px 14px; border-radius: var(--r-pill);
  background: var(--card); border: var(--bw) solid var(--ink); font-size: 15px; font-weight: 900; line-height: 1.2;
}
.k-chip--gold { background: linear-gradient(var(--gold-1) 0 50%, var(--gold-2) 50%); }
.k-coin-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px 0 4px; border-radius: var(--r-pill);
  background: linear-gradient(#fff, #eef0ff); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink-sh);
  font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--money-pos); white-space: nowrap;
}
.k-coin-pill img { width: 34px; height: 34px; }

/* ---------- Forms (service pages: password reset, verify email, pay) */
.k-label { display: block; margin: 0 0 6px 4px; font-size: 15px; font-weight: 900; color: var(--ink); }
.k-input {
  display: block; width: 100%; min-height: 52px; padding: 10px 16px; border-radius: var(--r-input);
  border: var(--bw) solid var(--ink); background: #fff; color: var(--ink);
  font-family: var(--font); font-size: 17px; font-weight: 800; transition: border-color .15s, box-shadow .15s;
}
.k-input::placeholder { color: var(--muted); opacity: 1; }
.k-input:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(63, 156, 245, .3); }
.k-input[aria-invalid='true'] { border-color: var(--red-2); }
.k-field { margin-bottom: var(--sp-3); }
.k-hint { margin-top: 6px; font-size: var(--fs-small); color: var(--text-2); }
.k-error { color: var(--money-neg); font-weight: 900; }
.k-note { padding: 12px 16px; border-radius: var(--r-input); border: var(--bw) solid var(--ink); background: #fff; }
.k-note--ok { background: #e6fbe9; } .k-note--bad { background: #ffe9e9; }

/* ---------- Layout helpers */
.k-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.k-narrow { max-width: calc(760px + 2 * var(--gutter)); }
.k-stack > * + * { margin-top: var(--k-gap, var(--sp-3)); }
.k-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-gap, var(--sp-2)); }
.k-center { text-align: center; }
.k-grid { display: grid; gap: var(--k-gap, var(--sp-4)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--k-min, 260px)), 1fr)); }
.k-page { min-height: 100vh; min-height: 100dvh; background: var(--bg-grad); }
.k-muted { color: var(--text-2); }
.k-small { font-size: var(--fs-small); }
.k-link { color: var(--ink); font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.k-link:hover { text-decoration-color: var(--blue-2); }

/* Service-page shell (Go templates): gradient page, centered cream window. */
.k-shell { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 32px var(--gutter); background: var(--bg-grad); }
.k-shell .k-panel { width: 100%; max-width: 480px; }
.k-shell__mascot { width: 160px; height: 160px; margin: 0 auto 16px; }

/* ---------- Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}