:root {
  --color-1:       #5585b5;
  --color-1-dark:  #3b6692;
  --color-1-light: #d9e6f3;
  --color-2:       #53a8b6;
  --color-2-dark:  #3a8692;
  --color-2-light: #d8eff3;
  --color-3:       #79c2d0;
  --color-3-light: #acdfe9;
  --color-4:       #bbe4e9;

  --indigo-50:  var(--color-1-light);
  --indigo-100: #a2bcd6;
  --indigo-200: #6e97c0;
  --indigo-500: var(--color-1);
  --indigo-600: var(--color-1);
  --indigo-700: var(--color-1-dark);

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --sidebar-width:       260px;
  --sidebar-bg:          #2c5382;
  --sidebar-active:      #1f3c62;
  --sidebar-hover:       #25487a;
  --sidebar-text:        #a9c5e0;
  --sidebar-text-active: #ffffff;
  --sidebar-accent:      var(--color-4);
  --navbar-bg:           #2c5382;
  --navbar-text:         #a9c5e0;
  --navbar-text-active:  #ffffff;
  --topbar-height:       60px;
  --content-bg:          var(--slate-100);

  --card-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --card-shadow-hover:  0 4px 12px rgba(0,0,0,.12);
  --shadow-sm:          0 .125rem .25rem rgba(0,0,0,.075);
  --shadow-md:          0 .5rem 1rem rgba(0,0,0,.15);

  --spacing-xs: .25rem;
  --spacing-sm: .5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}