:root {
  --mk-bg: oklch(100% 0 0);
  --mk-bg-deep: oklch(97% 0.002 286);
  --mk-surface: oklch(98.5% 0.001 286);
  --mk-white: oklch(100% 0 0);
  --mk-black: oklch(14.5% 0.006 286);
  --mk-graphite: oklch(27% 0.006 286);
  --mk-muted: oklch(46% 0.012 286);
  --mk-ghost: oklch(70.5% 0.015 286);
  --mk-line: oklch(92% 0.004 286);
  --mk-acid: oklch(96.7% 0.001 286);
  --mk-acid-strong: oklch(92% 0.004 286);
  --mk-danger: oklch(58% 0.22 27);
  --mk-success: oklch(60% 0.15 150);
  --mk-blue: oklch(58% 0.20 256);
  --mk-blue-hover: oklch(52% 0.20 256);
  --mk-blue-soft: oklch(94% 0.025 256);
  --mk-blue-deep: oklch(20% 0.055 256);
  --mk-blue-ink: oklch(98% 0.004 256);
  --mk-blue-button-ink: oklch(13% 0.015 256);
  --mk-focus: oklch(14.5% 0.006 286);
  --mk-font-display: "TASA Orbiter Variable", "Arial Narrow", Arial, sans-serif;
  --mk-font-body: "TASA Orbiter Variable", Arial, sans-serif;
  --mk-font-mono: "Roboto Mono Variable", "SFMono-Regular", Consolas, monospace;
  --mk-font-dot: "Roboto Mono Variable", "SFMono-Regular", Consolas, monospace;
  --mk-body: var(--mk-font-body);
  --mk-space-1: .25rem;
  --mk-space-2: .5rem;
  --mk-space-3: .75rem;
  --mk-space-4: 1rem;
  --mk-space-5: 1.25rem;
  --mk-space-6: 1.5rem;
  --mk-space-8: 2rem;
  --mk-space-10: 2.5rem;
  --mk-space-12: 3rem;
  --mk-space-16: 4rem;
  --mk-space-20: 5rem;
  --mk-space-24: 6rem;
  --mk-gutter: clamp(1rem,4vw,4rem);
  --mk-text-xs: .7rem;
  --mk-text-sm: clamp(.78rem,.75rem + .12vw,.88rem);
  --mk-text-body: clamp(.9rem,.86rem + .15vw,1rem);
  --mk-text-lead: clamp(1rem,.92rem + .32vw,1.22rem);
  --mk-text-h2: clamp(2.1rem,1.45rem + 2.9vw,4.8rem);
  --mk-text-display: clamp(3.4rem,2rem + 7vw,9rem);
  --mk-radius-xs: .375rem;
  --mk-radius-sm: .5rem;
  --mk-radius-md: .75rem;
  --mk-radius-lg: 1rem;
  --mk-radius-round: 999px;
  --mk-shadow-panel: 0 1px 2px color-mix(in oklch,var(--mk-black) 5%,transparent),0 8px 24px color-mix(in oklch,var(--mk-black) 5%,transparent);
  --mk-shadow-control: 0 1px 2px color-mix(in oklch,var(--mk-black) 8%,transparent);
  --mk-fast: 160ms;
  --mk-base: 220ms;
  --mk-ease: cubic-bezier(.2,.7,.2,1);
}

html[data-theme="dark"] {
  --mk-bg: oklch(12.5% 0.006 286);
  --mk-bg-deep: oklch(15.5% 0.007 286);
  --mk-surface: oklch(18% 0.007 286);
  --mk-white: oklch(18% 0.007 286);
  --mk-black: oklch(95.5% 0.003 286);
  --mk-graphite: oklch(74% 0.008 286);
  --mk-muted: oklch(70% 0.01 286);
  --mk-ghost: oklch(48% 0.012 286);
  --mk-line: oklch(27% 0.008 286);
  --mk-acid: oklch(23% 0.008 286);
  --mk-acid-strong: oklch(29% 0.009 286);
  --mk-focus: oklch(92% 0.004 286);
  --mk-blue: oklch(70% 0.17 256);
  --mk-blue-hover: oklch(76% 0.14 256);
  --mk-blue-soft: oklch(23% 0.035 256);
  --mk-blue-deep: oklch(18% 0.045 256);
  --mk-blue-ink: oklch(98% 0.004 256);
  --mk-blue-button-ink: oklch(13% 0.015 256);
  --mk-shadow-panel: 0 1px 2px color-mix(in oklch,black 30%,transparent),0 12px 34px color-mix(in oklch,black 35%,transparent);
  --mk-shadow-control: 0 1px 2px color-mix(in oklch,black 38%,transparent);
}