/* Custom styles for Unito brand */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  /* Unito Brand Colors */
  --sl-color-accent: #3AAFA9;        /* Unito teal/cyan */
  --sl-color-accent-low: #DDEDF4;    /* Unito light blue */
  --sl-color-accent-high: #192230;   /* Unito dark blue */

  /* Typography - Lato Font */
  --sl-font: 'Lato', sans-serif;

  /* Additional Unito brand colors for customization */
  --unito-primary: #192230;
  --unito-accent: #3AAFA9;
  --unito-secondary: #DDEDF4;
  --unito-muted: #9CABB9;

  /* Extended Color Palette from SVG */
  /* Blues */
  --unito-blue-100: #F2F6FA;
  --unito-blue-200: #E8F6FB;
  --unito-blue-300: #DDEDF4;
  --unito-blue-400: #D0DDE2;
  --unito-blue-500: #BEC3E3;
  --unito-blue-600: #9CABB9;
  --unito-blue-700: #677888;
  --unito-blue-800: #2D627D;
  --unito-blue-900: #187D9D;
  --unito-blue-950: #004263;

  /* Teals/Cyans */
  --unito-teal-100: #E9F7F7;
  --unito-teal-200: #E7F9EF;
  --unito-teal-300: #CDEFED;
  --unito-teal-400: #3BCBB4;
  --unito-teal-500: #3AAFA9;
  --unito-teal-600: #2CC0E3;

  /* Purples */
  --unito-purple-100: #EFEEFF;
  --unito-purple-200: #9D99DD;

  /* Reds */
  --unito-red-100: #FDE2DB;
  --unito-red-200: #FFBF74;
  --unito-red-300: #EB8989;
  --unito-red-400: #ED3151;

  /* Oranges */
  --unito-orange-100: #FFF4E7;
  --unito-orange-200: #FE9012;
}

/* Custom button styles using Unito colors */
.sl-button {
  background-color: var(--sl-color-accent);
  border-color: var(--sl-color-accent);
  color: white;
}

.sl-button:hover {
  background-color: var(--sl-color-accent-high);
  border-color: var(--sl-color-accent-high);
}

/* Custom link colors */
a {
  color: var(--sl-color-accent);
}

a:hover {
  color: var(--sl-color-accent-high);
}

/* Custom sidebar styling */
.sl-sidebar {
  border-right-color: var(--sl-color-accent-low);
}

/* Custom header styling */
.sl-header {
  border-bottom-color: var(--sl-color-accent-low);
}