:root {
  /* Creaturely primitives */
  --cr-teal-700: #075d59;
  --cr-teal-600: #096b66;
  --cr-teal-500: #087e78;
  --cr-teal-200: #77d6ce;
  --cr-teal-100: #cfedea;
  --cr-coral-500: #f26b5b;
  --cr-coral-100: #fff1ed;
  --cr-ink: #19302f;
  --cr-muted: #5d706f;
  --cr-border: #d7e3e1;
  --cr-canvas: #f7fbfa;
  --cr-white: #ffffff;

  /* Light semantic theme */
  --cr-color-primary: var(--cr-teal-500);
  --cr-color-on-primary: var(--cr-white);
  --cr-color-primary-container: var(--cr-teal-100);
  --cr-color-on-primary-container: var(--cr-ink);
  --cr-color-accent: var(--cr-coral-500);
  --cr-color-on-accent: var(--cr-ink);
  --cr-color-accent-container: var(--cr-coral-100);
  --cr-color-background: var(--cr-canvas);
  --cr-color-surface: var(--cr-white);
  --cr-color-text: var(--cr-ink);
  --cr-color-text-muted: var(--cr-muted);
  --cr-color-border: var(--cr-border);
  --cr-color-success: #237a4b;
  --cr-color-warning: #8a5a00;
  --cr-color-error: #b64145;
  --cr-color-info: #2e6fa3;

  --cr-font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", sans-serif;
  --cr-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cr-radius-sm: 8px;
  --cr-radius-md: 14px;
  --cr-radius-lg: 24px;
  --cr-radius-pill: 999px;
}

[data-theme="dark"] {
  --cr-color-primary: #77d6ce;
  --cr-color-on-primary: #0b2d2a;
  --cr-color-primary-container: #096b66;
  --cr-color-on-primary-container: #eaf4f2;
  --cr-color-accent: #ff9b8b;
  --cr-color-on-accent: #3d1210;
  --cr-color-accent-container: #52231f;
  --cr-color-background: #102523;
  --cr-color-surface: #17312f;
  --cr-color-text: #eaf4f2;
  --cr-color-text-muted: #b8cac7;
  --cr-color-border: #607a76;
}