:root, [data-theme="light"] {
  --primary-50: #e6f5f3;
  --primary-100: #d9edea;
  --primary-200: #bedad6;
  --primary-300: #9ac1bc;
  --primary-400: #76a9a3;
  --primary-500: #53928b;
  --primary-600: #417973;
  --primary-700: #30615c;
  --primary-800: #1f4a46;
  --primary-900: #113733;
  --primary: #53928b;
  --primary-solid: #53928b;
  --primary-solid-hover: #417973;
  --primary-solid-active: #30615c;
  --on-primary-solid: #111111;
  --primary-text: #417973;
  --primary-tint: #e6f5f3;
  --focus-ring: #417973;
  --shadow-focus: 0 0 0 2px var(--canvas), 0 0 0 4px #417973;
  --ink: #242725;
  --ink-muted: #6f7170;
  --ink-subtle: #898b8a;
  --ink-inverse: #f5f8f6;
  --canvas: #f6f8f7;
  --surface: #ffffff;
  --surface-sunken: #eef1ef;
  --surface-raised: #ffffff;
  --secondary: #20302a;
  --on-secondary: #f5f8f6;
  --secondary-tint: #eef1ef;
  --neutral-tint: #e3e7e5;
  --line: #e0e4e1;
  --line-strong: #c1c5c3;
  --control-border: #7d817f;
  --overlay: #24272580;
}
[data-theme="dark"] {
  --primary-50: #e6f5f3;
  --primary-100: #d9edea;
  --primary-200: #bedad6;
  --primary-300: #9ac1bc;
  --primary-400: #76a9a3;
  --primary-500: #53928b;
  --primary-600: #417973;
  --primary-700: #30615c;
  --primary-800: #1f4a46;
  --primary-900: #113733;
  --primary: #53928b;
  --primary-solid: #53928b;
  --primary-solid-hover: #76a9a3;
  --primary-solid-active: #9ac1bc;
  --on-primary-solid: #181b1a;
  --primary-text: #76a9a3;
  --primary-tint: #232e2c;
  --focus-ring: #76a9a3;
  --shadow-focus: 0 0 0 2px var(--canvas), 0 0 0 4px #76a9a3;
  --ink: #f1f4f2;
  --ink-muted: #9da09f;
  --ink-subtle: #6a6d6c;
  --ink-inverse: #181b1a;
  --canvas: #181b1a;
  --surface: #242725;
  --surface-sunken: #121513;
  --surface-raised: #353937;
  --secondary: #20302a;
  --on-secondary: #f1f4f2;
  --secondary-tint: #121513;
  --neutral-tint: #454946;
  --line: #454946;
  --line-strong: #5b5f5c;
  --control-border: #838785;
  --overlay: #181b1acc;
}