/* tokens for howtousedots.com, generated by build.py from site.yaml: do not edit */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/_theme/fonts/outfit-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/_theme/fonts/jetbrains-mono-var.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/_theme/fonts/caveat-latin.woff2') format('woff2'); }
:root {
  --bg: #f9f8f5;
  --surface: #fefdfa;
  --paper: #ffffff;
  --s50: #f9f8f5;
  --s100: #f3f1ec;
  --s200: #e7e2d8;
  --s300: #d2ccbe;
  --s400: #b5ad9c;
  --s500: #979182;
  --s600: #787263;
  --s700: #5a5549;
  --s800: #494439;
  --s900: #3c382f;
  --ink-2: #2c2821;
  --ink: #191713;
  --line: #e7e2d8;
  --line-2: #d2ccbe;
  --muted: #736d5f;
  --faint: #979182;
  --accent: #2450e6;
  --accent-2: #1c3eb3;
  --accent-3: #dce3fb;
  --accent-wash: #e8ebf4;
  --accent-text: #2450e6;
  --hi: #ffc94d;
  --hi-soft: #fff2d4;
  --hi-line: #ffd168;
  --hi-ink: #806426;
  --warn: #a8480c;
  --warn-soft: #fdf0dc;
  --warn-line: #f0c27a;
  --ok: #23703f;
  --ok-soft: #e2f3e7;
  --no-soft: #f3f1ec;
  --code-bg: #191713;
  --code-ink: #f1f3f7;
  --code-line: #191713;
  --code-chip: #39352d;
  --on-accent: #ffffff;
  --shadow-sm: 0 1px 2px rgba(25,23,19,0.05);
  --shadow-md: 0 2px 4px rgba(25,23,19,0.05), 0 4px 8px rgba(25,23,19,0.07);
  --shadow-lg: 0 4px 8px rgba(25,23,19,0.05), 0 8px 16px rgba(25,23,19,0.07), 0 16px 32px rgba(25,23,19,0.09);
  --shadow-xl: 0 8px 16px rgba(25,23,19,0.05), 0 16px 32px rgba(25,23,19,0.09), 0 32px 64px rgba(25,23,19,0.13);
  --maple: var(--accent); --maple-2: var(--accent-2); --maple-3: var(--accent-3); --maple-wash: var(--accent-wash);
  --on-maple: var(--on-accent); --butter: var(--hi); --butter-2: var(--hi-soft); --gold: var(--hi);
  --cream: var(--hi-soft); --cream-2: var(--hi-line);
  --pen: var(--accent); --pen-ink: var(--accent-text); --pencil: var(--s500); --marker: color-mix(in srgb, var(--hi) 58%, transparent);
  color-scheme: light;
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  --shot-pen: #2450e6; --shot-pen-dark: #8aa4ff; --shot-paper: #ffffff; --shot-marker: color-mix(in srgb, #ffc94d 62%, transparent);
}
:root[data-theme="dark"] {
  --bg: #161510;
  --surface: #232019;
  --paper: #1c1a14;
  --s50: #1c1a14;
  --s100: #29261f;
  --s200: #39352b;
  --s300: #534d41;
  --s400: #696357;
  --s500: #888172;
  --s600: #a69f8f;
  --s700: #c7c0b1;
  --s800: #dbd6ca;
  --s900: #eae6dc;
  --ink-2: #eae6dc;
  --ink: #f1ede4;
  --line: #39352b;
  --line-2: #534d41;
  --muted: #a69f8f;
  --faint: #888172;
  --accent: #8aa4ff;
  --accent-2: #a7bbff;
  --accent-3: #363d53;
  --accent-wash: #262931;
  --accent-text: #8aa4ff;
  --hi: #ffc94d;
  --hi-soft: #40351b;
  --hi-line: #7f662b;
  --hi-ink: #ffc94d;
  --warn: #f5b561;
  --warn-soft: #33250f;
  --warn-line: #7a5a1f;
  --ok: #7fcf9b;
  --ok-soft: #16301f;
  --no-soft: #29261f;
  --code-bg: #0f0e0b;
  --code-ink: #eef0f4;
  --code-line: #39352b;
  --code-chip: #29261f;
  --on-accent: #191713;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.32), 0 4px 8px rgba(0,0,0,0.45);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.32), 0 8px 16px rgba(0,0,0,0.45), 0 16px 32px rgba(0,0,0,0.58);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.32), 0 16px 32px rgba(0,0,0,0.58), 0 32px 64px rgba(0,0,0,0.83);
  --maple: var(--accent); --maple-2: var(--accent-2); --maple-3: var(--accent-3); --maple-wash: var(--accent-wash);
  --on-maple: var(--on-accent); --butter: var(--hi); --butter-2: var(--hi-soft); --gold: var(--hi);
  --cream: var(--hi-soft); --cream-2: var(--hi-line);
  --pen: var(--accent); --pen-ink: var(--accent-text); --pencil: var(--s500); --marker: color-mix(in srgb, var(--hi) 30%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --bg: #161510;
  --surface: #232019;
  --paper: #1c1a14;
  --s50: #1c1a14;
  --s100: #29261f;
  --s200: #39352b;
  --s300: #534d41;
  --s400: #696357;
  --s500: #888172;
  --s600: #a69f8f;
  --s700: #c7c0b1;
  --s800: #dbd6ca;
  --s900: #eae6dc;
  --ink-2: #eae6dc;
  --ink: #f1ede4;
  --line: #39352b;
  --line-2: #534d41;
  --muted: #a69f8f;
  --faint: #888172;
  --accent: #8aa4ff;
  --accent-2: #a7bbff;
  --accent-3: #363d53;
  --accent-wash: #262931;
  --accent-text: #8aa4ff;
  --hi: #ffc94d;
  --hi-soft: #40351b;
  --hi-line: #7f662b;
  --hi-ink: #ffc94d;
  --warn: #f5b561;
  --warn-soft: #33250f;
  --warn-line: #7a5a1f;
  --ok: #7fcf9b;
  --ok-soft: #16301f;
  --no-soft: #29261f;
  --code-bg: #0f0e0b;
  --code-ink: #eef0f4;
  --code-line: #39352b;
  --code-chip: #29261f;
  --on-accent: #191713;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.32), 0 4px 8px rgba(0,0,0,0.45);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.32), 0 8px 16px rgba(0,0,0,0.45), 0 16px 32px rgba(0,0,0,0.58);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.32), 0 16px 32px rgba(0,0,0,0.58), 0 32px 64px rgba(0,0,0,0.83);
  --maple: var(--accent); --maple-2: var(--accent-2); --maple-3: var(--accent-3); --maple-wash: var(--accent-wash);
  --on-maple: var(--on-accent); --butter: var(--hi); --butter-2: var(--hi-soft); --gold: var(--hi);
  --cream: var(--hi-soft); --cream-2: var(--hi-line);
  --pen: var(--accent); --pen-ink: var(--accent-text); --pencil: var(--s500); --marker: color-mix(in srgb, var(--hi) 30%, transparent);
  color-scheme: dark;
}
}