:root {
  --sa-navy: #0f0b2c;
  --sa-navy-2: #161233;
  --sa-orange: #f66b0e;
  --sa-orange-2: #f17a14;
  --sa-orange-dark: #c46200;
  --sa-indigo: #4f46e5;

  --color-primary-lighter: #fdd8bd;
  --color-primary-light: #fba66d;
  --color-primary: var(--sa-orange);
  --color-primary-dark: var(--sa-orange-dark);
  --color-primary-darker: #7a3d00;

  --app-bg: #f6f6fa;
  --app-surface: var(--background-color-solid, #fff);
  --app-border: color-mix(in srgb, var(--text-color-muted, #748194) 18%, transparent);
  --app-link: var(--sa-indigo);

  --app-sidebar-bg: linear-gradient(180deg, var(--sa-navy) 0%, var(--sa-navy-2) 100%);
  --app-sidebar-fg: rgb(255 255 255 / 72%);
  --app-sidebar-fg-strong: #fff;
  --app-sidebar-muted: rgb(255 255 255 / 45%);
  --app-sidebar-hover: rgb(255 255 255 / 8%);
  --app-sidebar-active-bg: rgb(246 107 14 / 18%);
  --app-sidebar-active-fg: #fff;
  --app-sidebar-active-bar: var(--sa-orange);
  --app-sidebar-border: rgb(255 255 255 / 8%);

  --app-brand-from: var(--sa-orange-2);
  --app-brand-to: var(--sa-orange);
}

:root[data-hb-theme="dark"] {
  --app-bg: #0b0920;
  --app-border: rgb(255 255 255 / 8%);
  --app-link: #a580f9;
  --app-sidebar-bg: linear-gradient(180deg, #08061a 0%, var(--sa-navy) 100%);
}