:root {
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-2: #f0f3f9;
  --app-text: #1f2937;
  --app-text-muted: #6b7280;
  --app-border-subtle: #dbe2ea;
  --app-border-subtler: #e6ecf3;
  --app-table-border: #dbe2ea;
  --app-muted-border: #dbe2ea;
  --app-accent: #2f6db3;
  --app-accent-hover: #25578f;
  --app-accent-contrast: #ffffff;
  /* Actions */
  --app-action-primary-bg: var(--app-accent);
  --app-action-primary-bg-hover: var(--app-accent-hover);
  --app-action-primary-text: var(--app-accent-contrast);
  --app-action-secondary-bg: var(--app-surface);
  --app-action-secondary-bg-hover: var(--app-surface-2);
  --app-action-secondary-text: var(--app-text);
  --app-action-ghost-bg: transparent;
  --app-action-ghost-bg-hover: var(--app-hover-bg);
  --app-action-ghost-text: var(--app-text-muted);
  --app-action-danger-bg: var(--app-danger);
  --app-action-danger-bg-hover: var(--app-danger-hover);
  --app-action-danger-border: var(--app-danger-hover);
  --app-action-danger-text: #ffffff;
  --app-action-success-bg: #2bb673;
  --app-action-success-bg-hover: #1d7c4e;
  --app-action-success-border: #1d7c4e;
  --app-action-success-text: #ffffff;
  --app-action-disabled-bg: var(--app-control-bg-disabled);
  --app-action-disabled-border: var(--app-control-border-disabled);
  --app-action-disabled-text: var(--app-text-muted);
  --app-danger: #b53939;
  --app-danger-hover: #8f2a2a;
  --app-warning: #e78f42;
  --app-task-open-bg: #ffffcc;
  --app-success: #2bb673;
  --app-success-hover: #228f5a;
  /* DEPRECATED: use --app-action-secondary-* */
  --app-secondary: #6b7280;
  --app-secondary-hover: #4b5563;
  --app-focus: #6ca8eb;
  --app-focus-strong: #2f6db3;
  --app-focus-ring: rgba(108, 168, 235, 0.35);
  --app-shine-highlight: rgba(255, 255, 255, 0.3);
  --app-shine-shadow: rgba(255, 255, 255, 0.6);
  --app-chip-bg: #f0f3f9;
  --app-chip-border: #dbe2ea;
  --app-chip-text: #1f2937;
  --app-control-bg: var(--app-surface);
  --app-control-text: var(--app-text);
  --app-control-border: var(--app-border-subtle);
  --app-control-placeholder: var(--app-text-muted);
  --app-control-bg-disabled: var(--app-surface-2);
  --app-control-border-disabled: var(--app-muted-border);
  --app-hover-bg: rgba(0, 0, 0, 0.05);
  --app-selected-bg: rgba(47, 109, 179, 0.08);
  --app-row-readonly-opacity: 0.68;
  --app-row-readonly-border: var(--app-muted-border);
  --app-row-pinned-accent: var(--app-accent);
  --app-row-pinned-icon: var(--app-accent);
  --app-row-colour-red-bg: #d1495b;
  --app-row-colour-red-text: #ffffff;
  --app-row-colour-amber-bg: #e78f42;
  --app-row-colour-amber-text: #ffffff;
  --app-row-colour-green-bg: #9ed8a6;
  --app-row-colour-green-text: #1f2937;
  --app-row-colour-purple-bg: #8d6ac9;
  --app-row-colour-purple-text: #ffffff;
  --app-row-colour-blue-bg: #2f6db3;
  --app-row-colour-blue-text: #ffffff;
  --app-row-colour-lightblue-bg: #66a3ff;
  --app-row-colour-lightblue-text: #0b1220;
  --app-radius-sm: 4px;
  --app-radius-md: 8px;
  --app-radius-lg: 12px;
  --app-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.08);
  --app-shadow-2: 0 8px 24px rgba(16, 24, 40, 0.12);
  --app-space-4: 4px;
  --app-space-8: 8px;
  --app-space-12: 12px;
  --app-space-16: 16px;
  --app-space-24: 24px;
  --app-space-32: 32px;
  --app-space-48: 48px;
}

[data-theme="dark"] {
  --app-bg: #111827;
  --app-surface: #1f2937;
  --app-surface-2: #273345;
  --app-text: #e5e7eb;
  --app-text-muted: #a3afc2;
  --app-border-subtle: #344256;
  --app-border-subtler: #2d394b;
  --app-table-border: #344256;
  --app-muted-border: #344256;
  --app-accent: #5f9be0;
  --app-accent-hover: #4a84c8;
  --app-accent-contrast: #0b1220;
  /* Actions */
  --app-action-primary-bg: var(--app-accent);
  --app-action-primary-bg-hover: var(--app-accent-hover);
  --app-action-primary-text: var(--app-accent-contrast);
  --app-action-secondary-bg: var(--app-surface);
  --app-action-secondary-bg-hover: var(--app-surface-2);
  --app-action-secondary-text: var(--app-text);
  --app-action-ghost-bg: transparent;
  --app-action-ghost-bg-hover: var(--app-hover-bg);
  --app-action-ghost-text: var(--app-text-muted);
  --app-action-danger-bg: var(--app-danger);
  --app-action-danger-bg-hover: var(--app-danger-hover);
  --app-action-danger-border: var(--app-danger-hover);
  --app-action-danger-text: #ffffff;
  --app-action-success-bg: #55c98d;
  --app-action-success-bg-hover: #42b479;
  --app-action-success-border: #42b479;
  --app-action-success-text: #0b1220;
  --app-action-disabled-bg: var(--app-control-bg-disabled);
  --app-action-disabled-border: var(--app-control-border-disabled);
  --app-action-disabled-text: var(--app-text-muted);
  --app-danger: #da6c6c;
  --app-danger-hover: #c85b5b;
  --app-warning: #e3a663;
  --app-task-open-bg: #5c5a2a;
  --app-success: #55c98d;
  --app-success-hover: #42b479;
  /* DEPRECATED: use --app-action-secondary-* */
  --app-secondary: #7f8ca0;
  --app-secondary-hover: #6d7b90;
  --app-focus: #8fc2ff;
  --app-focus-strong: #8fc2ff;
  --app-focus-ring: rgba(143, 194, 255, 0.35);
  --app-shine-highlight: rgba(255, 255, 255, 0.24);
  --app-shine-shadow: rgba(255, 255, 255, 0.45);
  --app-chip-bg: #273345;
  --app-chip-border: #344256;
  --app-chip-text: #e5e7eb;
  --app-control-bg: var(--app-surface);
  --app-control-text: var(--app-text);
  --app-control-border: var(--app-border-subtle);
  --app-control-placeholder: var(--app-text-muted);
  --app-control-bg-disabled: var(--app-surface-2);
  --app-control-border-disabled: var(--app-muted-border);
  --app-hover-bg: rgba(255, 255, 255, 0.06);
  --app-selected-bg: rgba(95, 155, 224, 0.18);
  --app-row-readonly-opacity: 0.74;
  --app-row-readonly-border: var(--app-muted-border);
  --app-row-pinned-accent: var(--app-accent);
  --app-row-pinned-icon: var(--app-accent);
  --app-row-colour-red-bg: #9a4250;
  --app-row-colour-red-text: #ffffff;
  --app-row-colour-amber-bg: #9f6f44;
  --app-row-colour-amber-text: #ffffff;
  --app-row-colour-green-bg: #3e6e54;
  --app-row-colour-green-text: #e5e7eb;
  --app-row-colour-purple-bg: #5f4a88;
  --app-row-colour-purple-text: #f3f4f6;
  --app-row-colour-blue-bg: #2f5689;
  --app-row-colour-blue-text: #eaf2ff;
  --app-row-colour-lightblue-bg: #456c9f;
  --app-row-colour-lightblue-text: #f3f7ff;
  --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --app-shadow-2: 0 10px 26px rgba(0, 0, 0, 0.4);
}