/* Reset and design tokens. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--selection); }

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

:root {
  --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif-font: ui-serif, Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --reader-size: 17px;
  --reader-leading: 1.7;
  --reader-measure: 72ch;

  --radius: 8px;
  --radius-lg: 12px;
  --topbar-height: 46px;
  --statusbar-height: 26px;
  --sidebar-width: 280px;
  --outline-width: 240px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 0.28), 0 4px 12px -4px rgb(0 0 0 / 0.12);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Light ------------------------------------------------------------ */

:root, [data-theme="light"] {
  --bg: #ffffff;
  --bg-sunken: #f6f7f9;
  --bg-raised: #ffffff;
  --bg-hover: #f0f1f4;
  --bg-active: #e6e8ec;
  --bg-code: #f6f7f9;

  --fg: #1c2024;
  --fg-muted: #62676d;
  --fg-subtle: #8b9096;

  --border: #e3e5e9;
  --border-strong: #cdd1d7;

  --selection: color-mix(in srgb, var(--accent) 22%, transparent);
  --overlay: rgb(20 22 26 / 0.42);

  --tok-comment: #7a838c;
  --tok-string: #0a7d55;
  --tok-number: #b3541e;
  --tok-keyword: #9333ea;
  --tok-type: #0b6bcb;
  --tok-function: #1a56db;
  --tok-property: #b3541e;
  --tok-operator: #5b6169;
  --tok-punct: #8b9096;
  --tok-literal: #b3541e;
  --tok-regexp: #0a7d55;
  --tok-meta: #9333ea;
  --tok-tag: #c2255c;
  --tok-attr: #0b6bcb;
  --tok-insert: #0a7d55;
  --tok-insert-bg: #e7f7ef;
  --tok-delete: #c92a2a;
  --tok-delete-bg: #fdecec;
}

/* Dark ------------------------------------------------------------- */

[data-theme="dark"] {
  --bg: #0d1117;
  --bg-sunken: #0a0d12;
  --bg-raised: #161b22;
  --bg-hover: #1c232c;
  --bg-active: #262d38;
  --bg-code: #12171e;

  --fg: #e4e8ee;
  --fg-muted: #98a1ad;
  --fg-subtle: #6e7681;

  --border: #21262d;
  --border-strong: #363c45;

  --overlay: rgb(1 3 6 / 0.62);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 0.6), 0 4px 12px -4px rgb(0 0 0 / 0.4);

  --tok-comment: #7d8590;
  --tok-string: #7ee2b8;
  --tok-number: #f0a868;
  --tok-keyword: #d2a8ff;
  --tok-type: #79c0ff;
  --tok-function: #96d0ff;
  --tok-property: #ffa657;
  --tok-operator: #a6adbb;
  --tok-punct: #6e7681;
  --tok-literal: #f0a868;
  --tok-regexp: #7ee2b8;
  --tok-meta: #d2a8ff;
  --tok-tag: #ff9bb3;
  --tok-attr: #79c0ff;
  --tok-insert: #56d364;
  --tok-insert-bg: #12261a;
  --tok-delete: #f85149;
  --tok-delete-bg: #2a1213;
}

/* Accents ---------------------------------------------------------- */

:root, [data-accent="indigo"] { --accent: #4f46e5; --accent-soft: #eef2ff; }
[data-accent="teal"]  { --accent: #0d9488; --accent-soft: #effcf9; }
[data-accent="amber"] { --accent: #b45309; --accent-soft: #fff8eb; }
[data-accent="rose"]  { --accent: #be123c; --accent-soft: #fff1f3; }
[data-accent="slate"] { --accent: #475569; --accent-soft: #f1f5f9; }

[data-theme="dark"] { --accent: #818cf8; --accent-soft: #1c1f3a; }
[data-theme="dark"][data-accent="teal"]  { --accent: #2dd4bf; --accent-soft: #0d2b2a; }
[data-theme="dark"][data-accent="amber"] { --accent: #fbbf24; --accent-soft: #2c2109; }
[data-theme="dark"][data-accent="rose"]  { --accent: #fb7185; --accent-soft: #2f1119; }
[data-theme="dark"][data-accent="slate"] { --accent: #94a3b8; --accent-soft: #1a1f27; }

/* Reader typeface -------------------------------------------------- */

[data-font="sans"]  { --reader-font: var(--ui-font); }
[data-font="serif"] { --reader-font: var(--serif-font); }
[data-font="mono"]  { --reader-font: var(--mono-font); }
:root { --reader-font: var(--ui-font); }

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