/**
 * Application color tokens.
 * Load after Bootstrap. Other stylesheets must use these variables — do not hard-code colors there.
 */
:root {
  --app-white: var(--bs-white);
  --app-black: var(--bs-black);

  --app-primary: var(--bs-primary);
  --app-primary-hover: #0b5ed7;
  --app-primary-text: #084298;
  --app-primary-bg: var(--bs-primary-bg-subtle);
  --app-primary-bg-soft: #e7f1ff;
  --app-primary-border: var(--bs-primary-border-subtle);
  --app-primary-border-strong: #6ea8fe;
  --app-primary-shadow: rgba(13, 110, 253, 0.12);

  --app-secondary: var(--bs-secondary);
  --app-secondary-hover: #5c636a;

  --app-success: var(--bs-success);
  --app-success-hover: #157347;
  --app-success-text: #146c43;
  --app-success-bg: var(--bs-success-bg-subtle);
  --app-success-border: var(--bs-success-border-subtle);
  --app-success-border-strong: #75b798;

  --app-danger: var(--bs-danger);
  --app-danger-text: #b02a37;
  --app-danger-bg: var(--bs-danger-bg-subtle);
  --app-danger-border: var(--bs-danger-border-subtle);

  --app-warning: var(--bs-warning);
  --app-warning-text: #997404;
  --app-warning-bg: var(--bs-warning-bg-subtle);
  --app-warning-border: var(--bs-warning-border-subtle);

  --app-info: var(--bs-info);
  --app-info-border-soft: #b6d4fe;

  --app-orange: var(--bs-orange);
  --app-orange-text: #ca6510;
  --app-orange-bg: #ffe5d0;
  --app-orange-border: #fecba1;

  --app-indigo: var(--bs-indigo);
  --app-purple: var(--bs-purple);
  --app-purple-text: #59359a;

  --app-body-bg: var(--bs-body-bg);
  --app-surface: var(--bs-white);
  --app-surface-secondary: var(--bs-gray-100);
  --app-surface-tertiary: #fafbfc;
  --app-surface-muted: #f1f3f5;
  --app-surface-input: var(--bs-tertiary-bg);

  --app-border: var(--bs-border-color);
  --app-border-subtle: var(--bs-gray-200);
  --app-border-strong: var(--bs-gray-400);

  --app-text: var(--bs-body-color);
  --app-text-secondary: var(--bs-gray-700);
  --app-text-muted: var(--bs-gray-600);
  --app-text-disabled: var(--bs-gray-500);
  --app-text-print: var(--bs-black);

  --app-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --app-shadow-card-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
  --app-shadow-primary: 0 2px 8px var(--app-primary-shadow);
}