/* Valrig design tokens: all light/dark palette values live here. */

:root,
[data-bs-theme="light"] {
  color-scheme: light;

  --vr-primary: #376f8a;
  --vr-primary-rgb: 55, 111, 138;
  --vr-primary-hover: #2e5d74;
  --vr-primary-hover-rgb: 46, 93, 116;
  --vr-primary-active: #264e61;
  --vr-primary-soft: #e7f1f6;
  --vr-primary-soft-hover: #d9e9f1;
  --vr-primary-text: #244f63;
  --vr-primary-border: #a8cbd9;
  --vr-on-primary: #ffffff;

  --vr-secondary: #e8edf1;
  --vr-secondary-hover: #dce3e8;
  --vr-secondary-active: #cfd9df;
  --vr-secondary-text: #35434b;
  --vr-secondary-border: #c4d0d7;
  --vr-on-secondary: #25323a;

  --vr-text-primary: #20282e;
  --vr-text-muted: #5f6d76;
  --vr-text-subtle: #7d8991;
  --vr-text-link: var(--vr-primary);
  --vr-text-link-hover: var(--vr-primary-hover);

  --vr-surface-body: #fbfcfe;
  --vr-surface-body-rgb: 251, 252, 254;
  --vr-surface-elevated: #ffffff;
  --vr-surface-secondary: #f4f7f9;
  --vr-surface-secondary-rgb: 244, 247, 249;
  --vr-surface-tertiary: #eaf0f3;
  --vr-surface-tertiary-rgb: 234, 240, 243;
  --vr-surface-hover: #edf3f6;
  --vr-surface-selected: #e2eef4;
  --vr-surface-disabled: #eef2f4;
  --vr-surface-overlay: rgba(25, 35, 42, 0.52);

  --vr-border-standard: #d7e0e5;
  --vr-border-strong: #adbbc4;
  --vr-border-focus: #376f8a;
  --vr-focus-ring: rgba(55, 111, 138, 0.28);
  --vr-input-hover-border: #9fb4c0;
  --vr-input-focus-border: #376f8a;
  --vr-disabled-text: #7a868e;

  --vr-neutral-bg: #e9eef1;
  --vr-neutral-text: #35434b;
  --vr-neutral-border: #cbd6dc;

  --vr-info: #397591;
  --vr-info-rgb: 57, 117, 145;
  --vr-info-hover: #30647c;
  --vr-info-bg: #e6f2f8;
  --vr-info-text: #24556c;
  --vr-info-border: #acd0df;
  --vr-on-info: #ffffff;

  --vr-success: #347557;
  --vr-success-rgb: 52, 117, 87;
  --vr-success-hover: #2a6248;
  --vr-success-bg: #e7f4eb;
  --vr-success-text: #245b40;
  --vr-success-border: #acd2ba;
  --vr-on-success: #ffffff;

  --vr-warning: #86630f;
  --vr-warning-rgb: 134, 99, 15;
  --vr-warning-hover: #70520c;
  --vr-warning-bg: #fff4d6;
  --vr-warning-text: #694a00;
  --vr-warning-border: #e5cb7b;
  --vr-on-warning: #ffffff;

  --vr-danger: #a43e4b;
  --vr-danger-rgb: 164, 62, 75;
  --vr-danger-hover: #89333f;
  --vr-danger-bg: #fbe9ec;
  --vr-danger-text: #842f3b;
  --vr-danger-border: #dfadb4;
  --vr-on-danger: #ffffff;

  --vr-avatar-workspace-bg: var(--vr-primary);
  --vr-avatar-workspace-text: #ffffff;

  --vr-radius-sm: 0.375rem;
  --vr-radius-md: 0.5rem;
  --vr-radius-lg: 0.75rem;
  --vr-radius-control: 0.75rem;
  --vr-radius-card: 0.85rem;
  --vr-radius-modal: 0.85rem;
  --vr-shadow-sm: 0 1px 3px rgba(32, 40, 46, 0.06);
  --vr-shadow-md: 0 4px 12px rgba(32, 40, 46, 0.08);
  --vr-shadow-lg: 0 10px 28px rgba(32, 40, 46, 0.1);
  --vr-shadow-elevated: 0 16px 38px rgba(32, 40, 46, 0.13);
  --vr-control-height-sm: 38px;
  --vr-control-height-md: 44px;
  --vr-control-height-lg: 52px;

  /* Compatibility tokens retained for existing qpr-* application classes. */
  --qpr-sidebar-bg: var(--vr-surface-secondary);
  --qpr-navbar-bg: var(--vr-surface-elevated);
  --qpr-navbar-border: var(--vr-border-standard);
  --qpr-kpi-bg: var(--vr-surface-elevated);
  --qpr-shadow-sm: var(--vr-shadow-sm);
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  --vr-primary: #78b2cc;
  --vr-primary-rgb: 120, 178, 204;
  --vr-primary-hover: #91c4da;
  --vr-primary-hover-rgb: 145, 196, 218;
  --vr-primary-active: #619ab4;
  --vr-primary-soft: #243d49;
  --vr-primary-soft-hover: #2b4957;
  --vr-primary-text: #b9dceb;
  --vr-primary-border: #477489;
  --vr-on-primary: #102630;

  --vr-secondary: #303b45;
  --vr-secondary-hover: #3a4651;
  --vr-secondary-active: #46535e;
  --vr-secondary-text: #d5dee3;
  --vr-secondary-border: #52616d;
  --vr-on-secondary: #edf3f6;

  --vr-text-primary: #e7edf0;
  --vr-text-muted: #aab6bd;
  --vr-text-subtle: #839099;
  --vr-text-link: #91c4da;
  --vr-text-link-hover: #b0d7e7;

  --vr-surface-body: #181d23;
  --vr-surface-body-rgb: 24, 29, 35;
  --vr-surface-elevated: #202730;
  --vr-surface-secondary: #252e38;
  --vr-surface-secondary-rgb: 37, 46, 56;
  --vr-surface-tertiary: #2c3742;
  --vr-surface-tertiary-rgb: 44, 55, 66;
  --vr-surface-hover: #303c47;
  --vr-surface-selected: #294653;
  --vr-surface-disabled: #252d35;
  --vr-surface-overlay: rgba(5, 8, 11, 0.76);

  --vr-border-standard: #3d4a56;
  --vr-border-strong: #5b6975;
  --vr-border-focus: #91c4da;
  --vr-focus-ring: rgba(145, 196, 218, 0.34);
  --vr-input-hover-border: #607482;
  --vr-input-focus-border: #91c4da;
  --vr-disabled-text: #7f8b94;

  --vr-neutral-bg: #303a44;
  --vr-neutral-text: #d8e0e5;
  --vr-neutral-border: #4a5965;

  --vr-info: #7ab4d0;
  --vr-info-rgb: 122, 180, 208;
  --vr-info-hover: #94c6dc;
  --vr-info-bg: #203c4a;
  --vr-info-text: #b8ddec;
  --vr-info-border: #47768b;
  --vr-on-info: #102630;

  --vr-success: #79b895;
  --vr-success-rgb: 121, 184, 149;
  --vr-success-hover: #91c7a8;
  --vr-success-bg: #223c2e;
  --vr-success-text: #b9dfc8;
  --vr-success-border: #4f7b60;
  --vr-on-success: #10281b;

  --vr-warning: #d0ac57;
  --vr-warning-rgb: 208, 172, 87;
  --vr-warning-hover: #dfbe70;
  --vr-warning-bg: #43391f;
  --vr-warning-text: #f0d792;
  --vr-warning-border: #806c38;
  --vr-on-warning: #302300;

  --vr-danger: #d9828d;
  --vr-danger-rgb: 217, 130, 141;
  --vr-danger-hover: #e49aa3;
  --vr-danger-bg: #472a30;
  --vr-danger-text: #f1bdc4;
  --vr-danger-border: #85515a;
  --vr-on-danger: #351015;

  --vr-avatar-workspace-bg: var(--vr-primary-soft);
  --vr-avatar-workspace-text: #ffffff;

  --vr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --vr-shadow-md: 0 2px 7px rgba(0, 0, 0, 0.2);
  --vr-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.22);
  --vr-shadow-elevated: 0 6px 18px rgba(0, 0, 0, 0.24);

  --qpr-sidebar-bg: var(--vr-surface-secondary);
  --qpr-navbar-bg: var(--vr-surface-elevated);
  --qpr-navbar-border: var(--vr-border-standard);
  --qpr-kpi-bg: var(--vr-surface-elevated);
  --qpr-shadow-sm: var(--vr-shadow-sm);
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--vr-surface-body);
  --bs-body-bg-rgb: var(--vr-surface-body-rgb);
  --bs-body-color: var(--vr-text-primary);
  --bs-emphasis-color: var(--vr-text-primary);
  --bs-secondary-color: var(--vr-text-muted);
  --bs-secondary-bg: var(--vr-surface-secondary);
  --bs-secondary-bg-rgb: var(--vr-surface-secondary-rgb);
  --bs-tertiary-bg: var(--vr-surface-tertiary);
  --bs-tertiary-bg-rgb: var(--vr-surface-tertiary-rgb);
  --bs-border-color: var(--vr-border-standard);
  --bs-border-color-translucent: var(--vr-border-standard);

  --bs-primary: var(--vr-primary);
  --bs-primary-rgb: var(--vr-primary-rgb);
  --bs-primary-bg-subtle: var(--vr-primary-soft);
  --bs-primary-border-subtle: var(--vr-primary-border);
  --bs-primary-text-emphasis: var(--vr-primary-text);
  --bs-secondary-bg-subtle: var(--vr-neutral-bg);
  --bs-secondary-border-subtle: var(--vr-neutral-border);
  --bs-secondary-text-emphasis: var(--vr-neutral-text);

  --bs-info: var(--vr-info);
  --bs-info-rgb: var(--vr-info-rgb);
  --bs-info-bg-subtle: var(--vr-info-bg);
  --bs-info-border-subtle: var(--vr-info-border);
  --bs-info-text-emphasis: var(--vr-info-text);
  --bs-success: var(--vr-success);
  --bs-success-rgb: var(--vr-success-rgb);
  --bs-success-bg-subtle: var(--vr-success-bg);
  --bs-success-border-subtle: var(--vr-success-border);
  --bs-success-text-emphasis: var(--vr-success-text);
  --bs-warning: var(--vr-warning);
  --bs-warning-rgb: var(--vr-warning-rgb);
  --bs-warning-bg-subtle: var(--vr-warning-bg);
  --bs-warning-border-subtle: var(--vr-warning-border);
  --bs-warning-text-emphasis: var(--vr-warning-text);
  --bs-danger: var(--vr-danger);
  --bs-danger-rgb: var(--vr-danger-rgb);
  --bs-danger-bg-subtle: var(--vr-danger-bg);
  --bs-danger-border-subtle: var(--vr-danger-border);
  --bs-danger-text-emphasis: var(--vr-danger-text);

  --bs-link-color: var(--vr-text-link);
  --bs-link-color-rgb: var(--vr-primary-rgb);
  --bs-link-hover-color: var(--vr-text-link-hover);
  --bs-link-hover-color-rgb: var(--vr-primary-hover-rgb);
  --bs-focus-ring-color: var(--vr-focus-ring);
}

.qpr-sidebar,
.offcanvas-body {
  background-color: var(--qpr-sidebar-bg);
}

.qpr-navbar {
  background-color: var(--qpr-navbar-bg);
  border-bottom: 1px solid var(--qpr-navbar-border);
}

.kpi-card {
  background-color: var(--qpr-kpi-bg);
  box-shadow: var(--qpr-shadow-sm);
}

.sidebar {
  background-color: var(--qpr-sidebar-bg);
  border-right: 1px solid var(--bs-border-color);
}

.offcanvas-header.qpr-drawer-mobile-header {
  background-color: var(--qpr-sidebar-bg);
  color: var(--bs-body-color);
}