:root {
  --grey-0: #FFFFFF;
  --grey-25: #FAFAFA;
  --grey-50: #F5F5F5;
  --grey-100: #EDEDED;
  --grey-150: #E4E4E4;
  --grey-200: #DBDBDB;
  --grey-300: #C4C4C4;
  --grey-400: #A4A4A4;
  --grey-500: #838383;
  --grey-600: #676767;
  --grey-700: #555555;
  --grey-800: #404040;
  --grey-850: #333333;
  --grey-900: #262626;
  --grey-950: #191919;
  --grey-975: #151515;
  --grey-1000: #101010;
}

:root {
  --blocked-hatch: var(--grey-300);
  --blocked-ink: var(--grey-950);
  --consequence-ink: var(--grey-950);
  --consequence-rule: var(--grey-950);
  --consequence-surface: var(--grey-100);
  --disabled-ink: var(--grey-600);
  --disabled-surface: var(--grey-100);
  --edge-control: var(--grey-500);
  --focus-ring: var(--grey-950);
  --hairline: var(--grey-200);
  --hairline-strong: var(--grey-950);
  --ink-body: var(--grey-850);
  --ink-muted: var(--grey-600);
  --ink-strong: var(--grey-950);
  --on-primary: var(--grey-0);
  --on-state-failed: var(--grey-0);
  --op-create: var(--grey-950);
  --op-delete: var(--grey-950);
  --op-read: var(--grey-600);
  --op-update: var(--grey-950);
  --primary: var(--grey-950);
  --primary-hover: var(--grey-800);
  --primary-pressed: var(--grey-1000);
  --signal: var(--grey-950);
  --state-done: var(--grey-700);
  --state-failed: var(--grey-800);
  --state-running: var(--grey-950);
  --surface-inset: var(--grey-50);
  --surface-page: var(--grey-0);
  --surface-panel: var(--grey-25);
  --surface-raised: var(--grey-0);
  --surface-selected: var(--grey-100);
}

.dark, [data-theme="dark"] {
  --blocked-hatch: var(--grey-700);
  --blocked-ink: var(--grey-25);
  --consequence-ink: var(--grey-25);
  --consequence-rule: var(--grey-25);
  --consequence-surface: var(--grey-850);
  --disabled-ink: var(--grey-400);
  --disabled-surface: var(--grey-850);
  --edge-control: var(--grey-500);
  --focus-ring: var(--grey-0);
  --hairline: var(--grey-800);
  --hairline-strong: var(--grey-25);
  --ink-body: var(--grey-150);
  --ink-muted: var(--grey-400);
  --ink-strong: var(--grey-25);
  --on-primary: var(--grey-950);
  --on-state-failed: var(--grey-950);
  --op-create: var(--grey-25);
  --op-delete: var(--grey-25);
  --op-read: var(--grey-400);
  --op-update: var(--grey-25);
  --primary: var(--grey-0);
  --primary-hover: var(--grey-200);
  --primary-pressed: var(--grey-300);
  --signal: var(--grey-25);
  --state-done: var(--grey-300);
  --state-failed: var(--grey-200);
  --state-running: var(--grey-25);
  --surface-inset: var(--grey-1000);
  --surface-page: var(--grey-950);
  --surface-panel: var(--grey-975);
  --surface-raised: var(--grey-900);
  --surface-selected: var(--grey-900);
}

:root {
  --baseline: 4px;
  --column-gutter: 24px;
  --composer-min: 64px;
  --conversation-head: 48px;
  --hang: 144px;
  --head-rule: 2px;
  --m-breakpoint-narrow: 720px;
  --m-columns: 12;
  --m-gutter: 24px;
  --m-margin: 64px;
  --m-margin-narrow: 20px;
  --m-max: 1440px;
  --measure-prose: 72ch;
  --panel-margin: 40px;
  --panel-min-width: 1024px;
  --permission-column: 120px;
  --plan-row-min: 48px;
  --records-column: 168px;
  --session-rail: 256px;
  --session-rail-collapsed: 56px;
  --text-column: minmax(360px, 540px);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
}

:root {
  --border-consequence: 4px;
  --border-control: 1px;
  --border-hairline: 1px;
  --border-head: 2px;
  --border-rule: 1px;
}

:root {
  --focus-offset: 2px;
  --focus-width: 2px;
}

:root {
  --hatch: repeating-linear-gradient(135deg, var(--blocked-hatch) 0 1px, transparent 1px 6px);
}

:root {
  --radius-appicon-16: 1px;
  --radius-appicon-24: 2px;
  --radius-control: 2px;
  --radius-record: 0px;
}

:root {
  --shadow-float: 0 1px 2px rgba(25,25,25,0.12), 0 8px 20px rgba(25,25,25,0.12);
  --shadow-none: none;
}