:root {
  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino", "Palatino Linotype", Georgia, serif;

  /* Background */
  --color-bg: #FBFBF7;

  /* Brand yellow — the logo's sticky-note fill. Light/high-luminance, so it only
     ever pairs with ink text (--color-primary-900), never white. Hover deepens
     toward the ink rather than going grey. */
  --color-brand-yellow: #F7D14B;
  --color-brand-yellow-hover: color-mix(in srgb, var(--color-brand-yellow) 86%, var(--color-primary-900));
  /* Deeper sibling for thin marks / icons that must read on white (the light
     yellow disappears there). */
  --color-brand-amber: oklch(80% 0.15 84);

  /* Primary scale (warm inky dark, pulled from the logo letterforms ~#14110D) */
  --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);
  /* Primary action / selected-accent fill — between 700 and 800. */
  --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);

  /* Spring-wood scale (off-white/cream) */
  --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);

  /* Armadillo scale (dark gray/taupe) */
  --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);

  /* Slate scale */
  --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);

  /* Semantic */
  --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;

  /* Spacing */
  --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;

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

  /* Shadows */
  --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);

  /* Surface */
  --surface: var(--color-white);
  --surface-radius: var(--radius-xl);
  --surface-shadow: var(--shadow-md);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Layout — the navbar floats at --navbar-top and re-pins to the top when
     scrolled, at which point it is --navbar-height tall. Sticky content (the
     rail, the editor toolbar) tucks under --navbar-height; page content clears
     the resting navbar via --navbar-footprint. Derive offsets from these, not
     from magic numbers. */
  --navbar-top: 1.5rem;
  --navbar-height: 3.625rem;
  --navbar-footprint: calc(var(--navbar-top) + var(--navbar-height));

  /* One horizontal gutter shared by every workspace surface and the auth pages,
     so page margins stay consistent across screens (16px on phones → 32px wide). */
  --page-gutter: clamp(1rem, 4vw, 2rem);

  /* Workspace header band — the back-link (and, in the editor, the controls) row,
     height-matched to the rail's space switcher so their bottom borders form one
     continuous line across the rail/pane seam. */
  --workspace-band-height: 2.75rem;
}