/* design tokens: color, type, space, borders, shadows
   every value the rest of the stylesheets use is declared here */

:root,
[data-theme='dark'] {
  color-scheme: dark;

  /* surfaces */
  --bg: #0a0f1e;
  --bg-raised: #111a31;
  --bg-code: #0c1426;

  /* ink: borders and hard shadows */
  --border: #f2ece1;
  --border-strong: #ffffff;
  --shadow-color: #ff9529;

  /* text */
  --text: #f2ece1;
  --text-muted: #b9b2a5;
  --text-heading: #ffffff;

  /* accent: text on the page, fill behind ink */
  --accent: #ff9529;
  --accent-hover: #ffb862;
  --accent-fill: #ff9529;
  --accent-fill-alt: #ffc34c;
  --accent-contrast: #000000;
  --sidebar-hover-bg: #8a3f00;

  /* syntax */
  --syntax-keyword: #ff8a80;
  --syntax-type: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-number: #d2a8ff;
  --syntax-comment: #3fbf66;
  --syntax-annotation: #d2a8ff;
  --syntax-function: #c8b3ff;
}

[data-theme='light'] {
  color-scheme: light;

  /* sand, dimmer than white */
  --bg: #ebd3a4;
  --bg-raised: #f2e0bd;
  --bg-code: #f5e7cb;

  --border: #000000;
  --border-strong: #000000;
  --shadow-color: var(--accent);

  --text: #111111;
  --text-muted: #4d4636;
  --text-heading: #000000;

  --accent: #8a3f00;
  --accent-hover: #5c2a00;
  --accent-fill: #ff9529;
  --accent-fill-alt: #ffc34c;
  --accent-contrast: #000000;
  --sidebar-hover-bg: rgba(255, 149, 41, 0.22);

  --syntax-keyword: #b02718;
  --syntax-type: #0550ae;
  --syntax-string: #0a3069;
  --syntax-number: #7326b8;
  --syntax-comment: #2f6b45;
  --syntax-annotation: #7326b8;
  --syntax-function: #6639a6;
}

:root {
  /* the orange bar is the same in both themes */
  --header-bg: #ff9529;
  --header-border: #000000;
  --header-text: #000000;
  --header-hover-bg: #ffffff;

  /* type: 1.25 modular scale above a 17px body */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif;
  --font-heading: 'Arial Black', 'Segoe UI Black', 'Helvetica Neue', Impact, sans-serif;
  --font-mono: 'Cascadia Code', 'JetBrains Mono', Consolas, 'SF Mono', Menlo, monospace;

  --text-small: 0.8125rem;
  --text-body: 1.0625rem;
  --text-step-1: 1.25rem;
  --text-step-2: 1.5rem;
  --text-step-3: 1.875rem;
  --text-step-4: 2.75rem;

  --leading-tight: 1.15;
  --leading-body: 1.65;

  /* space: 8px rhythm, with one half step */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* square corners, thick lines, unblurred offset shadows */
  --radius-sm: 2px;
  --radius: 4px;

  --line: 3px;
  --line-thin: 2px;

  --shadow-small: 3px 3px 0 var(--shadow-color);
  --shadow: 5px 5px 0 var(--shadow-color);
  --shadow-large: 8px 8px 0 var(--shadow-color);
  --shadow-ink: 3px 3px 0 #000000;

  --header-height: 64px;
  --docs-nav-width: 260px;
  --content-width: 1080px;
}