:root {
  color-scheme: light;

  /* Primitive colors */
  --ca-primary-50: #eff5ff;
  --ca-primary-100: #dceaff;
  --ca-primary-200: #b8d2ff;
  --ca-primary-300: #8ab3ff;
  --ca-primary-400: #5790ff;
  --ca-primary-500: #2f72ff;
  --ca-primary-600: #1e5fe6;
  --ca-primary-700: #194cbc;
  --ca-primary-800: #193f93;
  --ca-primary-900: #183872;

  --ca-salmon-50: #fff4f1;
  --ca-salmon-100: #ffe3dc;
  --ca-salmon-200: #ffc8bc;
  --ca-salmon-300: #ffa995;
  --ca-salmon-400: #ff927b;
  --ca-salmon-500: #f77a62;
  --ca-salmon-600: #dc604a;
  --ca-salmon-700: #b84837;
  --ca-salmon-800: #913c31;
  --ca-salmon-900: #77372f;

  --ca-neutral-0: #fff;
  --ca-neutral-25: #fbfcfe;
  --ca-neutral-50: #f6f8fc;
  --ca-neutral-100: #eef2f7;
  --ca-neutral-200: #e2e8f0;
  --ca-neutral-300: #cbd5e1;
  --ca-neutral-400: #98a2b3;
  --ca-neutral-500: #667085;
  --ca-neutral-600: #475467;
  --ca-neutral-700: #344054;
  --ca-neutral-800: #1f2a3b;
  --ca-neutral-900: #142033;
  --ca-neutral-950: #0b1220;

  --ca-success-50: #ecfdf5;
  --ca-success-500: #1fa971;
  --ca-success-700: #117a51;
  --ca-warning-50: #fff8e7;
  --ca-warning-500: #e99a2e;
  --ca-warning-700: #a86114;
  --ca-danger-50: #fff0f3;
  --ca-danger-500: #df5b70;
  --ca-danger-700: #ac344a;
  --ca-violet-50: #f5f2ff;
  --ca-violet-500: #8266e8;
  --ca-pink-50: #fff1f7;
  --ca-pink-500: #d8619b;

  /* Semantic light theme */
  --ca-canvas: var(--ca-neutral-50);
  --ca-canvas-elevated: var(--ca-neutral-0);
  --ca-surface: var(--ca-neutral-0);
  --ca-surface-subtle: var(--ca-neutral-25);
  --ca-surface-muted: var(--ca-neutral-100);
  --ca-text: var(--ca-neutral-900);
  --ca-text-secondary: var(--ca-neutral-500);
  --ca-text-muted: var(--ca-neutral-400);
  --ca-text-on-action: var(--ca-neutral-0);
  --ca-border: #e7ecf3;
  --ca-border-strong: var(--ca-neutral-300);
  --ca-action: var(--ca-primary-600);
  --ca-action-hover: var(--ca-primary-700);
  --ca-action-active: var(--ca-primary-800);
  --ca-action-fill: var(--ca-primary-600);
  --ca-action-fill-hover: var(--ca-primary-700);
  --ca-action-fill-active: var(--ca-primary-800);
  --ca-action-soft: var(--ca-primary-50);
  --ca-focus: rgba(47, 114, 255, .28);
  --ca-salmon-glow: rgba(255, 146, 123, .16);
  --ca-overlay: rgba(11, 18, 32, .42);

  /* Spacing */
  --ca-space-0: 0;
  --ca-space-0-5: 2px;
  --ca-space-1: 4px;
  --ca-space-2: 8px;
  --ca-space-3: 12px;
  --ca-space-4: 16px;
  --ca-space-5: 20px;
  --ca-space-6: 24px;
  --ca-space-8: 32px;
  --ca-space-10: 40px;
  --ca-space-12: 48px;
  --ca-space-16: 64px;
  --ca-space-20: 80px;
  --ca-space-24: 96px;

  /* Shape */
  --ca-radius-xs: 6px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 20px;
  --ca-radius-2xl: 24px;
  --ca-radius-full: 999px;

  /* Elevation */
  --ca-shadow-0: none;
  --ca-shadow-1: 0 1px 2px rgba(20, 32, 51, .04), 0 8px 24px rgba(37, 54, 82, .06);
  --ca-shadow-2: 0 8px 24px rgba(27, 45, 73, .10), 0 2px 6px rgba(27, 45, 73, .05);
  --ca-shadow-3: 0 20px 56px rgba(20, 32, 51, .16), 0 4px 14px rgba(20, 32, 51, .08);

  /* Typography */
  --ca-font-sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ca-weight-regular: 450;
  --ca-weight-medium: 550;
  --ca-weight-semibold: 650;
  --ca-weight-bold: 720;
  --ca-text-caption: 12px;
  --ca-text-label: 13px;
  --ca-text-body: 14px;
  --ca-text-body-lg: 16px;
  --ca-text-h3: 18px;
  --ca-text-h2: 24px;
  --ca-text-h1: 32px;
  --ca-text-display: 48px;

  /* Motion */
  --ca-duration-instant: 80ms;
  --ca-duration-fast: 140ms;
  --ca-duration-normal: 220ms;
  --ca-duration-slow: 320ms;
  --ca-duration-chart: 620ms;
  --ca-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ca-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --ca-ease-accelerate: cubic-bezier(.4, 0, 1, 1);
  --ca-ease-emphasized: cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --ca-sidebar: 248px;
  --ca-sidebar-collapsed: 80px;
  --ca-topbar: 72px;
  --ca-content-max: 1480px;
  --ca-reading-max: 760px;
  --ca-grid-gap: 24px;
  --ca-control-compact: 36px;
  --ca-control: 40px;
  --ca-input: 44px;
  --ca-control-lg: 48px;

  /* Layers */
  --ca-z-sticky: 100;
  --ca-z-popover: 300;
  --ca-z-drawer: 500;
  --ca-z-modal: 700;
  --ca-z-toast: 900;
  --ca-z-tooltip: 1000;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ca-canvas: #0b1220;
  --ca-canvas-elevated: #111a2a;
  --ca-surface: #151f30;
  --ca-surface-subtle: #1a2638;
  --ca-surface-muted: #243249;
  --ca-text: #f7f9fc;
  --ca-text-secondary: #b5c0d0;
  --ca-text-muted: #8997aa;
  --ca-text-on-action: #fff;
  --ca-border: #26344a;
  --ca-border-strong: #3b4b63;
  --ca-action: #8ab3ff;
  --ca-action-hover: #b8d2ff;
  --ca-action-active: #5790ff;
  --ca-action-fill: #1e5fe6;
  --ca-action-fill-hover: #194cbc;
  --ca-action-fill-active: #193f93;
  --ca-action-soft: rgba(87, 144, 255, .14);
  --ca-focus: rgba(87, 144, 255, .38);
  --ca-salmon-glow: rgba(255, 146, 123, .13);
  --ca-overlay: rgba(0, 0, 0, .62);
  --ca-shadow-1: 0 10px 28px rgba(0, 0, 0, .18);
  --ca-shadow-2: 0 14px 36px rgba(0, 0, 0, .26);
  --ca-shadow-3: 0 24px 64px rgba(0, 0, 0, .38);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}