/* ============================================================
   DriveMoney — Design System tokens & components
   Metronome-derived. Подключи этот файл на любой странице:
     <link rel="stylesheet" href="/tokens.css">
   Дальше используй классы (.btn, .card, .input, .pill ...) и
   переменные var(--accent) — НЕ пиши хардкод-цвета.
   ============================================================ */

:root{
  /* — color (OKLch) — */
  --bg:oklch(97.5% 0.004 110);      /* #f6f6f3 канвас */
  --surface:oklch(100% 0 0);        /* #ffffff карточки */
  --fg:oklch(22% 0.018 158);        /* #14211b текст */
  --muted:oklch(50% 0.012 158);     /* #6a766f вторичный текст */
  --border:oklch(91% 0.005 110);    /* #e6e6e1 границы */
  --accent:oklch(92% 0.19 122);     /* #cdf564 фирменный лайм */
  --accent-ink:oklch(24% 0.04 158); /* текст на лайме */
  --ink:oklch(15% 0.018 158);       /* #0c1411 тёмные секции/футер */
  --ink-fg:oklch(96% 0.006 110);    /* текст на тёмном */
  --ink-muted:oklch(72% 0.012 150);
  --data:oklch(34% 0.045 165);      /* #1f3a31 data-карточки */
  --success:oklch(62% 0.15 150);
  --warn:oklch(75% 0.15 80);
  --danger:oklch(58% 0.19 25);

  /* — type — */
  --font:'Söhne','Neue Haas Grotesk Display',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* — radius / spacing — */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--fg);font:450 16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-weight:590;letter-spacing:-0.02em;line-height:1.05}
h1{font-size:clamp(40px,6vw,68px)}
h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.022em}
h3{font-size:22px;letter-spacing:-0.015em}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.kicker{font:600 12px/1 var(--font);letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}

/* keyboard focus — обязательно для доступности */
a:focus-visible,.btn:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:550 14.5px/1 var(--font);
  letter-spacing:-0.01em;padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,background .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-lime{background:var(--accent);color:var(--accent-ink)}
.btn-lime:hover{box-shadow:0 6px 18px color-mix(in oklch,var(--accent) 45%,transparent)}
.btn-dark{background:var(--ink);color:var(--ink-fg)}
.btn-dark:hover{background:oklch(22% 0.02 158)}
.btn-outline{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn-outline:hover{background:var(--fg);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--fg);padding:11px 12px}
.btn-ghost:hover{background:color-mix(in oklch,var(--fg) 7%,transparent)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-lg{padding:14px 24px;font-size:16px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.loading{position:relative;color:transparent !important}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:btn-spin .6s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ---------- form ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:550;font-size:13.5px;margin-bottom:7px;letter-spacing:-0.01em}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.input,.select{width:100%;font:450 15px/1.3 var(--font);padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--fg);transition:border-color .15s,box-shadow .15s}
.input:focus,.select:focus{outline:none;border-color:var(--fg);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 38%,transparent)}
.input.err{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in oklch,var(--danger) 22%,transparent)}
.input-msg{font-size:12px;color:var(--danger);margin-top:6px;display:none}
.input.err ~ .input-msg{display:block}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);cursor:pointer}
.checkbox input{margin-top:2px;accent-color:var(--ink);width:16px;height:16px}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font:550 12px/1 var(--font);padding:6px 11px;border-radius:var(--r-pill)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%}
.pill.ok{background:color-mix(in oklch,var(--success) 16%,white);color:oklch(40% 0.1 150)}
.pill.ok::before{background:var(--success)}
.pill.warn{background:color-mix(in oklch,var(--warn) 22%,white);color:oklch(48% 0.12 70)}
.pill.warn::before{background:var(--warn)}
.pill.danger{background:color-mix(in oklch,var(--danger) 14%,white);color:oklch(45% 0.16 25)}
.pill.danger::before{background:var(--danger)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 12px 30px oklch(20% 0.02 158 / .07);transform:translateY(-2px)}
.card-data{background:var(--data);color:var(--ink-fg);border-color:transparent}

/* ---------- table ---------- */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;background:var(--surface)}
table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font:550 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:13px 18px;background:var(--bg);border-bottom:1px solid var(--border)}
tbody td{padding:14px 18px;border-bottom:1px solid var(--border)}
tbody td.num{font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums}
/* На узких экранах таблицы вписываются в ширину экрана без горизонтальной прокрутки:
   fixed-раскладка не даёт содержимому распирать колонки, длинные токены переносятся. */
@media(max-width:560px){
  .tbl-wrap{overflow-x:visible}
  table{min-width:0;table-layout:fixed}
  thead th{padding:11px 12px;font-size:10px;letter-spacing:.04em;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  tbody td{padding:11px 12px;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  tbody td.num{font-size:13px;white-space:normal}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .card:hover,.btn:active{transform:none}
}