:root {
  /* Primitive color tokens */

  /* Colorful */
  --color-blue-900: rgba(30, 58, 138, 1);
  --color-green-900: rgba(60, 115, 91, 1);
  --color-yellow-600: rgba(216, 193, 93, 1);
  --color-yellow-900: rgba(197, 170, 52, 1);
  --color-orange-100: rgba(250, 242, 237, 1);
  --color-orange-900: rgba(197, 110, 52, 1);
  --color-red-900: rgba(183, 86, 86, 1);
  --color-purple-900: rgba(134, 86, 151, 1);
  --color-peach-400: rgba(249, 230, 216, 1);
  --color-peach-900: rgba(226, 175, 144, 1);

  /* Neutrals */
  --color-neutral-0: rgba(255, 255, 255, 1);
  --color-neutral-50: rgba(246, 245, 242, 1);
  --color-neutral-100: rgba(240, 235, 224, 1);
  --color-neutral-200: rgba(232, 227, 216, 1);
  --color-neutral-300: rgba(223, 219, 211, 1);
  --color-neutral-400: rgba(214, 210, 200, 1);
  --color-neutral-500: rgba(206, 201, 188, 1);
  --color-neutral-600: rgba(185, 180, 168, 1);
  --color-neutral-700: rgba(175, 169, 154, 1);
  --color-neutral-800: rgba(155, 149, 135, 1);
  --color-neutral-900: rgba(127, 120, 103, 1);
  --color-neutral-1000: rgba(100, 94, 79, 1);
  --color-neutral-1100: rgba(74, 69, 56, 1);
  --color-neutral-1200: rgba(52, 49, 41, 1);
  --color-neutral-1300: rgba(25, 24, 22, 1);

  /* Semantic color tokens */

  /* Canvas and surfaces */
  --color-canvas: var(--color-neutral-100);
  --color-surface: var(--color-neutral-0);
  --color-surface-subtle: var(--color-neutral-200);
  --color-surface-strong: var(--color-neutral-300);
  --color-surface-info: color-mix(in srgb, var(--color-action-primary) 9%, var(--color-surface));
  --color-surface-danger: color-mix(in srgb, var(--color-action-danger) 9%, var(--color-surface));
  --color-row-alternate: var(--color-neutral-50);
  --color-overlay: color-mix(in srgb, var(--color-neutral-200) 80%, transparent);

  /* Text */
  --color-text-primary: var(--color-neutral-1200);
  --color-text-secondary: var(--color-neutral-1000);
  --color-text-muted: var(--color-neutral-800);
  --color-text-disabled: var(--color-neutral-600);

  /* Borders */
  --color-border-subtle: var(--color-neutral-100);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-500);

  /* Planning indicators */
  --color-school-holiday: var(--color-yellow-600);

  /* Actions and status */
  --color-action-primary: var(--color-blue-900);
  --color-action-danger: var(--color-red-900);

}