/* Web fonts — self-hosted variable woff2 files under /_site/fonts/.
   Generic family names ("Anchor Body" / "Anchor Display" / "Anchor Mono")
   so the actual face can be swapped by replacing the woff2 file with no
   CSS edits. See site/assets/fonts/CLAUDE.md for what each file is.
   Pair these @font-face rules with <link rel="preload"> in each consumer
   HTML so the font fetch starts in parallel with the stylesheet. */
@font-face {
  font-family: "Anchor Body";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/body.woff2") format("woff2");
}
@font-face {
  font-family: "Anchor Body";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/body-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Anchor Display";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/display.woff2") format("woff2");
}
@font-face {
  font-family: "Anchor Display";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/display-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Anchor Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/mono.woff2") format("woff2");
}
@font-face {
  font-family: "Anchor Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/mono-italic.woff2") format("woff2");
}

/* Font size tokens (--font-3 is default) */
:root {
  --font-1: 9px;
  --font-2: 11px;
  --font-3: 13px;
  --font-4: 16px;
  --font-5: 19px;
  --font-6: 24px;
  --font-7: 30px;
  --font-8: 38px;
  --font-9: 48px;
}

/* Mobile: scale up font sizes for touch readability */
:root.mobile {
  --font-1: 12px;
  --font-2: 14px;
  --font-3: 16px;
  --font-4: 19px;
  --font-5: 22px;
  --font-6: 27px;
  --font-7: 33px;
  --font-8: 41px;
  --font-9: 51px;
}

:root {
  /* Body: prefer the OS system font on Apple platforms (SF Pro), fall back
     to Inter ("Anchor Body") on Windows/Linux/Android where -apple-system
     and BlinkMacSystemFont don't resolve. Browsers lazy-load @font-face
     fonts only when actually used, so Apple users never download body.woff2. */
  --font-body: -apple-system, BlinkMacSystemFont, "Anchor Body", sans-serif;
  --font-display: "Anchor Display", -apple-system, BlinkMacSystemFont, "Anchor Body", sans-serif;
  --font-mono: "Anchor Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rad-1: 3px;
  --rad-2: 4px;
  --rad-3: 6px;

  --pad-1: 4px;
  --pad-2: 8px;
  --pad-3: 12px;
  --pad-4: 16px;
  --pad-5: 24px;
  --pad-6: 32px;
  --pad-7: 40px;
  --pad-8: 48px;
  --pad-9: 64px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 4px -1px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.12);

  /* Spacing */
  --header-height: var(--pad-8);
  --toolbar-height: var(--pad-6);
  --content-width: 1280px;

  /* Colors */
  --bg-color: #eae6ec;
  --bg-color-transparent: #eae6ecdc;

  --font-color: #1a1523;
  --font-color-light: #1a152394;
  --font-color-inverse: #ffffff;
  --highlight: #14011e1a;
  --highlight-light: #14011e0f;
  --highlight-transparent: #14011e0a;
  --outline-color: #888491;
  --solid-outline-on-background: #dedae1;

  /* Backdrop/scrim shown behind modals, mobile dropdowns, and mobile selects. */
  --cover-color: #00000066;

  --color-tomato: #e54d2e;
  --color-tomato-transparent: #e54d2e14;
  --color-red: #e5484d;
  --color-red-transparent: #e5484d12;
  --color-red-transparent-on-bg: #eadbe1;
  --color-plum: #d6409f;
  --color-plum-transparent: #d6409f14;
  --color-purple: #8e4ec6;
  --color-purple-transparent: #8e4ec614;
  --color-violet: #6e56cf;
  --color-violet-transparent: #6e56cf14;
  --color-blue: #3e63dd;
  --color-blue-transparent: #3e63dd14;
  --color-cyan: #0090ff;
  --color-cyan-transparent: #0090ff14;
  --color-teal: #00a2c7;
  --color-teal-transparent: #00a2c714;
  --color-jade: #12a594;
  --color-jade-transparent: #12a59414;
  --color-green: #30a46c;
  --color-green-transparent: #30a46c18;
  --color-brown: #978365;
  --color-brown-transparent: #97836514;
  --color-orange: #e55f0b;
  --color-orange-transparent: #f76b1518;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

a {
  color: var(--font-color);
}

body {
  background-color: var(--bg-color);
  font-family: var(--font-body);
  font-size: var(--font-3);
  margin: 0;
  padding: 0;
  color: var(--font-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}