:root {
  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Neutral end to end: what you see in-app is what gets published. */
  --font-display: "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: var(--accent);
  --color-brand-yellow-hover: var(--accent-hover);
  /* 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);

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


  /* ─── The notebook ───────────────────────────────────────────────────────
     Three materials resolved by light-dark(): a desk, ivory paper, and a black
     cover. Light is the white desk with ivory paper; dark ("the writing is
     dark") keeps ivory tiles on a cover-black desk but turns the page black.
     The mode is carried by color-scheme, set from body[data-theme] below. The
     armadillo/spring-wood/primary scales above still dress the public surface,
     which is not themed. */

  /* Desk: the ground and the pills that sit directly on it */
  --ground: light-dark(#FFFFFF, #161514);
  --raised: light-dark(#F2EFE6, #2B2A26);
  --raised-hover: light-dark(#E7E3D8, #3A3833);
  --raised-soft-hover: light-dark(#ECE8DE, #33312C);

  /* Text on the desk */
  --on-ground: light-dark(#1B1A18, #FAFAF8);
  --on-ground-dim: light-dark(#57554F, #B8B5AD);
  --on-ground-muted: light-dark(#85837B, #8E8B83);

  /* Paper, ivory: identical in both modes. The tiles read these. */
  --paper: #F4F1E9;
  --paper-row: #EAE6DB;
  --paper-row-hover: #E0DBCE;
  --paper-chip: #E6E2D6;
  --paper-chip-hover: #DCD7C9;
  --paper-hairline: #E3DFD3;
  --paper-dashed: #D6D1C3;
  --paper-ink: #1B1A18;
  --paper-ink-body: #2D2B27;
  --paper-ink-lede: #57554F;
  --paper-ink-muted: #85837B;
  --paper-ink-faint: #9E9C94;
  --paper-draft-ink: #7A7770;

  /* The page: ivory in light, black paper at night. Every component reads these
     names; the tile remaps them back to the ivory paper set. */
  --card: light-dark(var(--paper), #272521);
  --row: light-dark(var(--paper-row), #34312C);
  --row-hover: light-dark(var(--paper-row-hover), #403D37);
  --chip: light-dark(var(--paper-chip), #393631);
  --chip-hover: light-dark(var(--paper-chip-hover), #45423B);
  --hairline: light-dark(var(--paper-hairline), #3A3732);
  --dashed: light-dark(var(--paper-dashed), #49463F);

  /* Ink on the page */
  --ink: light-dark(var(--paper-ink), #FAFAF8);
  --ink-body: light-dark(var(--paper-ink-body), #E4E2DC);
  --ink-lede: light-dark(var(--paper-ink-lede), #B8B5AD);
  --ink-muted: light-dark(var(--paper-ink-muted), #8E8B83);
  --ink-faint: light-dark(var(--paper-ink-faint), #6E6C65);
  --draft-ink: light-dark(var(--paper-draft-ink), #8E8B83);

  /* Status green, for a connected custom domain (danger red reuses --color-danger) */
  --color-success: light-dark(oklch(55% 0.15 150), oklch(72% 0.15 150));

  /* The desk shows through where you are writing */
  --input-focus: light-dark(#FFFFFF, #3A3833);
  --knob: light-dark(#FFFFFF, #B8B5AD);

  /* Code blocks sit on their own ground in both modes */
  --code-bg: light-dark(#1B1A18, #141312);
  --code-fg: var(--accent);

  /* Text selection: softer over the darker page */
  --selection: light-dark(
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent)
  );

  /* Cover: the material of every floating thing (menus, toasts, the open
     switcher). Black in light mode, one step off the desk at night. */
  --cover: light-dark(#1B1A18, #2B2A26);
  --cover-hover: light-dark(#35332E, #3A3833);
  --cover-soft-hover: light-dark(#2E2D28, #33312C);
  --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: the one bright fill, always under dark ink text */
  --accent: #F7D14B;
  --accent-hover: #FFE07A;
  --on-accent: #17181A;

  /* Tiles radii — larger than the app's --radius-* scale by design */
  --radius-pill: 999px;
  --radius-tile: 30px;
  --radius-sheet: 34px;
  --radius-menu: 26px;
  --radius-row: 18px;
  --radius-row-sm: 15px;
  --radius-mono: 16px;

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

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

  /* Light is the default so the public layout, which sets no data-theme, never
     flips with the OS. The attribute lives on body (not html) because 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;
}