:root {
  --brand-primary: #C9972B;
  --brand-primary-hover: #B48722;
  --brand-primary-soft: #F7ECD3;

  --brand-sidebar: #2F3338;
  --brand-sidebar-hover: #3A3F45;
  --brand-sidebar-text: #F7F7F7;
  --brand-sidebar-muted: #B9BDC4;

  --brand-background: #F7F8FA;
  --brand-surface: #FFFFFF;
  --brand-text: #272A2F;
  --brand-muted: #747982;
  --brand-border: #E7E8EB;

  --brand-radius: 12px;
}

/* ================================
   APP
================================ */

html,
body {
  background: var(--brand-background) !important;
}

/* ================================
   SIDEBAR
================================ */

aside.bg-n-background {
  background: var(--brand-sidebar) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar text */
aside.bg-n-background .text-n-slate-11,
aside.bg-n-background .text-n-slate-12,
aside.bg-n-background .text-body-main {
  color: var(--brand-sidebar-muted) !important;
}

/* Main sidebar menu items */
aside.bg-n-background [role="button"] {
  border-radius: 10px !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

/* Hover */
aside.bg-n-background [role="button"]:hover {
  background: var(--brand-sidebar-hover) !important;
  color: #fff !important;
}

/* Selected / active */
aside.bg-n-background .bg-n-alpha-2 {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

/* Active item children */
aside.bg-n-background .bg-n-alpha-2 * {
  color: #fff !important;
}

/* Search field */
aside.bg-n-background a[href*="search"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

aside.bg-n-background a[href*="search"]:hover {
  background: rgba(255, 255, 255, 0.13) !important;
}

/* Sidebar separators */
aside.bg-n-background .border-n-weak,
aside.bg-n-background .bg-n-strong {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ================================
   BUTTONS
================================ */

button.bg-n-brand,
a.bg-n-brand {
  background: var(--brand-primary) !important;
}

button.bg-n-brand:hover,
a.bg-n-brand:hover {
  background: var(--brand-primary-hover) !important;
}

/* ================================
   GENERAL PANELS
================================ */

.bg-n-background {
  background-color: var(--brand-background);
}

.border-n-weak {
  border-color: var(--brand-border);
}

/* ================================
   SCROLLBAR
================================ */

aside ::-webkit-scrollbar {
  width: 5px;
}

aside ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
}