:root {
  --r1: 10px;
  --r2: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --v-line: var(--t3-lh);
  --v-item: var(--s2);
  --v-block: var(--s4);
  --v-section: var(--s6);

  --anchor-top: var(--s4);

  --maxw: 760px;
  --gutter: var(--s4);
  --touch: 44px;

  --t1: 11px;
  --t2: 13px;
  --t3: 15px;
  --t4: 22px;
  --t5: 28px;
  --t6: 44px;
  --t3-lh: 1.6;
  --t5-lh: 1.2;
  --t6-lh: 1.05;
  --t-input: 16px;

  --bp-sm: 560px;
  --bp-md: 860px;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --ink: #1b1b1f;
  --ink-2: #6b6b73;
  --line: #e3e3e7;
  --accent: #3a3a42;
  --accent-ink: #ffffff;
  --accent-soft: #eeeef1;
  --good: #2e6b52;
  --warn: #8a6100;
  --bad: #9a2f2f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1c;
    --surface: #242427;
    --ink: #ececef;
    --ink-2: #a2a2aa;
    --line: #37373c;
    --accent: #c9c9d2;
    --accent-ink: #1e1e21;
    --accent-soft: #303036;
    --good: #7fc0a4;
    --warn: #d8ab4a;
    --bad: #e08b8b;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, .55);
  }
}

.btn {
  font: 600 var(--t3) / 1 inherit;
  font-family: inherit;
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  border-radius: var(--r1);
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
}
.btn-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-sec { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-txt { background: transparent; color: var(--ink-2); border-color: transparent; padding-inline: var(--s2); }
.btn:disabled { opacity: .35; cursor: default; }

input, select, textarea { font-size: var(--t-input); }


.tap { min-height: var(--touch); min-width: var(--touch); }