/* Hazelrod design tokens. Fonts are self-hosted from ./fonts; paths are relative to this file. */

@font-face {
  font-family: "Vollkorn";
  src: url("fonts/Vollkorn.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Palette: four colors. Water has two tones so it stays readable on both surfaces. */
  --color-ink: #17212C;
  --color-ink-raised: #222E3A;
  --color-stone: #E3E6E2;
  --color-hazel: #8F8A57;
  --color-water-deep: #1D6766;
  --color-water-lit: #5C9F9B;

  /* Inside the mark only. Never use these for page UI. */
  --mark-hazel-light: #B5AF7B;
  --mark-hazel-shadow: #605C38;
  --mark-hazel-deep: #4A472B;
  --mark-wood: #DCD5B0;
  --mark-wood-ring: #B3AA7D;
  --mark-water: #2E7D79;
  --mark-water-light: #7FB8B3;

  /* Type */
  --font-heading: "Vollkorn", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 600;
  --weight-body: 400;
  --weight-strong: 600;

  /* Type scale, from The Elements of Typographic Style */
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-21: 1.3125rem;
  --text-24: 1.5rem;
  --text-36: 2.25rem;
  --text-48: 3rem;
  --text-72: 4.5rem;
  --leading-heading: 1.15;
  --leading-body: 1.5;
  --measure: 70ch;

  /* Spacing */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  /* Radii: by role, not one value everywhere */
  --radius-control: 3px;
  --radius-panel: 6px;
}