:root{
  --ct-dark-blue--100:#0a1d4e;
  --ct-bright-blue--150:#2451dc;
  --ct-bright-blue--100:#1850ff;
  --ct-bright-blue--40:#a7b9f1;
  --ct-bright-blue--30:#d3dcf8;
  --ct-bright-blue--20:#e9eefb;
  --ct-bright-blue--5:#f4f6fd;
  --ct-base-blue--100:#18399b;
  --ct-base-blue--60:#7488c3;
  --ct-mono--100:#1a1d23;
  --ct-mono--80:#27303e;
  --ct-mono--20:#c5c9d1;
  --ct-mono--0:#ffffff;
}

body {
    font-family: 'Inter', sans-serif;
}

.bg-brand   {background: var(--ct-dark-blue--100);}
.text-brand {color:      var(--ct-bright-blue--100);}
.chip-green {background: var(--ct-bright-blue--30);}
.chip-amber {background: var(--ct-bright-blue--20);}
.chip-red   {background: #fad6d6;}

/* Extracted background colors */
.bg-blue-5  {background: var(--ct-bright-blue--5);}
.bg-blue-20 {background: var(--ct-bright-blue--20);}
.bg-blue-40 {background: var(--ct-bright-blue--40);}

/* Extracted text colors */
.text-mono-20 {color: var(--ct-mono--20);}
.text-mono-80 {color: var(--ct-mono--80);}
.text-mono-100 {color: var(--ct-mono--100);}

/* Navigation button animations */
.nav-button {
  transition: all 0.2s ease-in-out;
}
.nav-button:hover {
  transform: translateY(-1px);
  background: var(--ct-bright-blue--40);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.nav-button:hover svg {
  transform: scale(1.1);
  color: var(--ct-bright-blue--100);
}
.nav-button svg {
  transition: all 0.2s ease-in-out;
}