/*
 * Design tokens. Keep in sync with packages/ui/src/styles/tokens.css (same values, used by the React app).
 * Names describe the role, not the colour. Colours used only once or twice stay literal in the component's CSS.
 */
:root {
  /* Brand / primary blue */
  --color-primary: #1868db;
  --color-primary-hover: #1558bc;
  --color-primary-dark: #123263;
  --color-primary-light: #357de8;
  --color-primary-soft: #8fb8f6;
  --color-primary-faint: #cfe1fd;
  --color-selected: #e9f2fe;
  --color-primary-tint: #f0f6ff;

  /* Text */
  --color-text: #292a2e;
  --color-text-subtle: #505258;
  --color-text-subtlest: #6b6e76;
  --color-text-secondary: #44546f;
  --color-text-disabled: #8c8f97;
  --color-icon-disabled: #b7b9be;
  --color-text-inverse: #ffffff;

  /* Surfaces and borders */
  --color-surface: #ffffff;
  --color-surface-sunken: #f7f8f9;
  --color-neutral: #f1f2f4;
  --color-neutral-hover: #e7e8ea;
  --color-neutral-bold: #41444f;
  --color-border: #dddee1;
  --color-border-input: #c7c9ce;

  /* Status */
  --color-danger: #ae2e24;
  --color-danger-bold: #c9372c;
  --color-danger-subtle: #ffeceb;
  --color-danger-border: #f2b8b3;
  --color-record: #e2483d;
  --color-success: #216e4e;
  --color-success-bold: #1f845a;
  --color-success-icon: #22a06b;
  --color-success-subtle: #dcfff1;
  --color-warning: #7f5f01;
  --color-warning-bold: #533f04;
  --color-warning-subtle: #fff7d6;
  --color-warning-faint: #fff7db;
  --color-warning-icon: #f5b400;
  --color-orange: #c25100;

  /* Type */
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}