@font-face {
  font-family: "Panton";
  src: url("./Panton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font: "Panton", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --canvas: #f6f7f8;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-strong: #f0f1f2;
  --ink: #181a1f;
  --ink-soft: #555b66;
  --ink-faint: #858b96;
  --line: #e4e6e9;
  --line-strong: #d3d6da;
  --gold: #ae8a35;
  --gold-deep: #86671f;
  --gold-soft: #f7f1e3;
  --green: #19734a;
  --green-soft: #e9f6ef;
  --amber: #9c6509;
  --amber-soft: #fff5df;
  --red: #b33a3a;
  --red-soft: #fff0ef;
  --blue: #315da8;
  --blue-soft: #edf3ff;
  --shadow-1: 0 1px 2px rgba(18, 23, 33, .04), 0 8px 24px rgba(18, 23, 33, .04);
  --shadow-2: 0 14px 36px rgba(18, 23, 33, .1);
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --content: 1440px;
  --reading: 860px;
  --rail: 232px;
  --topbar: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: var(--font); font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
::selection { background: #eadba9; color: #161616; }
:focus-visible { outline: 3px solid rgba(174, 138, 53, .32); outline-offset: 2px; }