:root {

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino", "Palatino Linotype", Georgia, serif;
  --page-title: clamp(36px, 4vw, 56px);

  --color-bg: #FBFBF7;

  --color-brand-yellow: var(--accent);
  --color-brand-yellow-hover: var(--accent-hover);

  --color-brand-amber: oklch(80% 0.15 84);

  --color-primary-50: oklch(96% 0.008 75);
  --color-primary-100: oklch(92% 0.012 75);
  --color-primary-200: oklch(85% 0.02 75);
  --color-primary-300: oklch(75% 0.028 75);
  --color-primary-400: oklch(63% 0.032 75);
  --color-primary-500: oklch(50% 0.035 75);
  --color-primary-600: oklch(40% 0.032 75);
  --color-primary-700: oklch(31% 0.028 75);

  --color-primary-750: oklch(27% 0.024 75);
  --color-primary-800: oklch(23% 0.02 75);
  --color-primary-900: oklch(16% 0.012 75);
  --color-primary-950: oklch(11% 0.006 75);

  --color-spring-wood-50: oklch(99.024% 0.00395 106.47);
  --color-spring-wood-100: oklch(98.698% 0.00527 106.5);
  --color-spring-wood-200: oklch(97.694% 0.01054 106.59);
  --color-spring-wood-300: oklch(96.415% 0.01453 106.67);
  --color-spring-wood-400: oklch(95.435% 0.01851 106.75);
  --color-spring-wood-500: oklch(94.152% 0.02251 106.82);
  --color-spring-wood-600: oklch(93.143% 0.02782 106.93);
  --color-spring-wood-700: oklch(92.134% 0.03313 107.03);
  --color-spring-wood-800: oklch(90.846% 0.03715 107.12);
  --color-spring-wood-900: oklch(89.859% 0.04115 107.2);
  --color-spring-wood-950: oklch(89.201% 0.04382 107.26);

  --color-armadillo-50: oklch(85.844% 0.01088 106.63);
  --color-armadillo-100: oklch(82.713% 0.01235 106.67);
  --color-armadillo-200: oklch(76.941% 0.01811 106.82);
  --color-armadillo-300: oklch(70.767% 0.02268 106.97);
  --color-armadillo-400: oklch(64.461% 0.02745 107.15);
  --color-armadillo-500: oklch(57.425% 0.02672 107.21);
  --color-armadillo-600: oklch(49.897% 0.02156 107.16);
  --color-armadillo-700: oklch(42.042% 0.01769 107.14);
  --color-armadillo-800: oklch(33.8% 0.0136 107.11);
  --color-armadillo-900: oklch(21.626% 0.00762 107.02);
  --color-armadillo-950: oklch(14.872% 0.00426 106.91);

  --color-slate-50: oklch(98% 0.005 240);
  --color-slate-100: oklch(96% 0.008 240);
  --color-slate-200: oklch(92% 0.012 240);
  --color-slate-300: oklch(85% 0.015 240);
  --color-slate-400: oklch(70% 0.02 240);
  --color-slate-500: oklch(55% 0.025 240);
  --color-slate-600: oklch(45% 0.025 240);
  --color-slate-700: oklch(35% 0.02 240);
  --color-slate-800: oklch(27% 0.015 240);
  --color-slate-900: oklch(20% 0.01 240);

  --color-danger: oklch(55% 0.2 25);
  --color-danger-hover: oklch(50% 0.21 25);
  --color-danger-bg: oklch(93% 0.04 25);
  --color-white: #ffffff;

  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --ease-slide: cubic-bezier(0.45, 0, 0.15, 1);

  --ground: light-dark(#F6F4EE, #161514);
  --raised: light-dark(#EBE8E0, #2B2A26);
  --raised-hover: light-dark(#E5E1D7, #3A3833);
  --raised-soft-hover: light-dark(#E8E5DC, #33312C);

  --on-ground: light-dark(#1B1A18, #FAFAF8);
  --on-ground-dim: light-dark(#57554F, #B8B5AD);
  --on-ground-muted: light-dark(#6E6B64, #8E8B83);

  --card: light-dark(#FBF9F5, #272521);
  --card-hover: light-dark(#FEFDFB, #2E2C28);
  --card-edge: light-dark(#E6E2D8, transparent);
  --row: light-dark(#F0EDE4, #34312C);
  --row-hover: light-dark(#EAE6DB, #403D37);
  --chip: light-dark(#EEEBE3, #393631);
  --chip-hover: light-dark(#E7E4DA, #45423B);
  --hairline: light-dark(#ECE9E2, #3A3732);
  --dashed: light-dark(#E0DCD3, #49463F);

  --tray: light-dark(#F0EDE4, #1E1D1A);
  --tray-hover: light-dark(#EAE6DB, #1A1917);
  --tray-hairline: light-dark(#ECE9E2, #33312C);
  --tray-dashed: light-dark(#E0DCD3, #46433D);

  --ink: light-dark(#1B1A18, #FAFAF8);
  --ink-body: light-dark(#2D2B27, #E4E2DC);
  --ink-lede: light-dark(#57554F, #B8B5AD);
  --ink-muted: light-dark(#85837B, #8E8B83);
  --ink-faint: light-dark(#9E9C94, #6E6C65);
  --draft-ink: light-dark(#6E6B64, #9A978F);

  --color-success: light-dark(oklch(55% 0.15 150), oklch(72% 0.15 150));

  --input-focus: light-dark(#FFFFFF, #3A3833);
  --knob: light-dark(#FFFFFF, #B8B5AD);

  --code-bg: light-dark(#1B1A18, #141312);
  --code-fg: var(--accent);

  --mark-yellow: light-dark(rgb(136 118 38), #D9C25A);
  --mark-orange: light-dark(rgb(185 94 6), #F0A05A);
  --mark-red: light-dark(rgb(207 0 0), #FF8A80);
  --mark-magenta: light-dark(rgb(216 28 170), #F48FD8);
  --mark-purple: light-dark(rgb(144 19 254), #C3A6FF);
  --mark-blue: light-dark(rgb(5 98 185), #82B8FF);
  --mark-green: light-dark(rgb(17 138 15), #7DD87A);
  --mark-sand: light-dark(rgb(148 82 22), #D7A878);
  --mark-gray: light-dark(rgb(102 102 102), #A8A49C);

  --admonition-note: light-dark(oklch(95.5% 0.022 250), oklch(29% 0.045 255));
  --admonition-tip: light-dark(oklch(95.5% 0.03 150), oklch(29% 0.045 150));
  --admonition-warning: light-dark(oklch(96% 0.045 88), oklch(30% 0.045 75));
  --admonition-danger: light-dark(oklch(95% 0.025 22), oklch(28.5% 0.05 22));

  --selection: light-dark(
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent)
  );

  --cover: light-dark(#1B1A18, #36342F);
  --cover-hover: light-dark(#35332E, #46433D);
  --cover-soft-hover: light-dark(#2E2D28, #3E3C37);
  --on-cover: #FAFAF8;
  --on-cover-dim: #B8B5AD;
  --on-cover-muted: #8E8B83;
  --cover-danger: #F0A0A0;
  --cover-danger-hover: #F5B6B6;
  --cover-danger-bg: rgb(240 160 160 / 0.12);
  --cover-shadow-color: light-dark(rgb(27 26 24 / 0.45), rgb(0 0 0 / 0.7));
  --cover-shadow: 0 24px 48px -20px var(--cover-shadow-color);
  --dialog-shadow-color: light-dark(rgb(27 26 24 / 0.35), rgb(0 0 0 / 0.75));
  --dialog-shadow: 0 40px 80px -32px var(--dialog-shadow-color);
  --backdrop: light-dark(rgb(27 26 24 / 0.40), rgb(0 0 0 / 0.55));

  --accent: #F7D14B;
  --accent-hover: #FFE07A;
  --on-accent: #17181A;

  --radius-pill: 999px;
  --radius-tile: 30px;
  --radius-sheet: 34px;
  --radius-menu: 26px;
  --radius-row: 18px;
  --radius-row-sm: 15px;
  --radius-mono: 16px;

  --header-height: 88px;
  --tiles-max-width: 1360px;
  --tiles-gutter: 28px;

  --page-width: 980px;
  --page-inset: clamp(28px, 6vw, 72px);
  --measure: 700px;
  --card-width: 480px;

  /* The theme attribute lives on body, not html: Turbo Drive swaps the body on every visit, so a preference change re-themes at once. */
  color-scheme: light;
}

:root:has(> body[data-theme="system"]) {
  color-scheme: light dark;
}

:root:has(> body[data-theme="dark"]) {
  color-scheme: dark;
}