/* paper-identity · tokens + base. Load fonts first (see references/typography.md). */

:root {
  color-scheme: light;
  --hub-sans: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hub-display: "Young Serif", "Source Serif 4 Variable", "Source Serif 4", Georgia, serif;
  --hub-serif: "Source Serif 4 Variable", "Source Serif 4", Georgia, serif;
  --hub-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --k-bg: #fbfbfb;
  --hub-ink: oklch(15% 0 0);
  --tint: 0 0 0;
  --hub-muted: rgb(var(--tint) / .486);
  --hub-faint: rgb(var(--tint) / .267);
  --hub-grey: #999;
  --hub-pill: #eaeaea;
  --pill: #eeeeeee0;
  --pill-hover: #e4e4e4f2;
  --surface: #fff;
  --surface-2: #f3f3f3;
  --surface-3: #eee;
  --hub-button: #181818;
  --hub-button-ink: #fff;
  --hub-button-hover: #333;
  --link: #1a6dff;
  --paper: #fff;
  --paper-ink: #000;
  --paper-body: #4d4d4d;
  --mark: oklch(90% .14 95);

  --hair: 0 0 0 .5px #00000014;
  --shadow-thumb: 0 0 0 .5px #00000014, 0 1px 1px -1px #0003, 0 1px 2px #00000014;
  --shadow-focus: 0 0 0 .5px #00000024, 0 1px 2px #00000014;
  --shadow-modal: 0 24px 60px -18px #00000059;
  --shadow-logo: 0 0 0 .5px #00000014, 0 8px 16px -8px #00000059;
  --sheet-shadow: drop-shadow(0 0 .5px #0000004d) drop-shadow(0 1px 2px #00000012);
  --sheet-shadow-hover: drop-shadow(0 0 .5px #00000057) drop-shadow(0 8px 16px #0000001a);

  --r-pill: 999px;
  --r-cover: 5px;
  --r-sheet: 8px;
  --r-media: 12px;
  --r-tile: 14px;
  --r-hero: 16px;
  --r-modal: 18px;

  --ease-rise: cubic-bezier(.22, .8, .28, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-pill: cubic-bezier(.3, 1.25, .5, 1);
  --ease-slip: cubic-bezier(.2, 1.15, .3, 1);
  --ease-dot: cubic-bezier(.5, 0, .2, 1);

  --sidebar-w: 220px;
  --content-left: 268px;
  --read-w: 565px;
  --gap: 12px;
  --hub-top: 0px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --k-bg: #141414;
  --hub-ink: #ededed;
  --tint: 255 255 255;
  --hub-muted: rgb(var(--tint) / .55);
  --hub-faint: rgb(var(--tint) / .3);
  --hub-grey: #8a8a8a;
  --hub-pill: #2a2a2b;
  --pill: #2c2c2ee6;
  --pill-hover: #3a3a3cf2;
  --surface: #1e1e1f;
  --surface-2: #1c1c1d;
  --surface-3: #2e2e30;
  --hub-button: #f0f0f0;
  --hub-button-ink: #111;
  --hub-button-hover: #d8d8d8;
  --link: #6ea6ff;
  --paper: #141414;
  --paper-ink: #f2f2f2;
  --paper-body: #b5b5b5;
  --hair: 0 0 0 .5px #ffffff14;
  --shadow-thumb: 0 0 0 .5px #ffffff14, 0 1px 2px #0000004d;
  --sheet-shadow: drop-shadow(0 0 .5px #ffffff26) drop-shadow(0 1px 2px #0000004d);
  --sheet-shadow-hover: drop-shadow(0 0 .5px #ffffff33) drop-shadow(0 8px 16px #00000066);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--k-bg);
  color: var(--hub-ink);
  font-family: var(--hub-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; font-size: 13px; line-height: 1.4; touch-action: manipulation; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* Arrow cursor with soft shadow (swap for your own .cur set if you have one) */
html, html * {
  cursor: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20filter%3D%22url%28%23s%29%22%3E%3Cpath%20d%3D%22M5.088%205.363L10.479%2020.725C10.781%2021.586%2011.982%2021.626%2012.342%2020.788L15.019%2014.544C15.12%2014.308%2015.308%2014.12%2015.544%2014.019L21.788%2011.342C22.626%2010.982%2022.586%209.781%2021.725%209.479L6.363%204.088C5.572%203.81%204.81%204.572%205.088%205.363Z%22%20fill%3D%22black%22%20stroke%3D%22white%22%20stroke-width%3D%222.056%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2228%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeDropShadow%20dy%3D%221%22%20stdDeviation%3D%222%22%20flood-opacity%3D%22.25%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") 5 4, auto !important;
}
input, textarea { cursor: text !important; }

:focus-visible { outline: 2px solid rgb(var(--tint) / .5); outline-offset: 2px; }
mark { color: inherit; background: var(--mark); border-radius: 3px; padding: 0 1px; }

@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}