:root {
  --primary-color: #014F86; /* Blue */
  --secondary-color: #2A6F97; /* Gray */
  --background-light: #effcff; /* Light background */
  --text-dark: #012A4A; /* Dark text */
  --background-skyblue: #89C2D9;
  --background-sidebar: #CAF0F8;
  --background-style1: #2C7DA0;

  --color-primary: #012A4A; 
  --color-primary-variant: #013A63; 
  --color-secondary: #01497C; 
  --color-accent: #014F86; 
  
  --color-success: #28a745; 
  --color-warning: #ffc107; 
  --color-danger: #dc3545; 
  
  --color-surface: #2A6F97; 
  --color-background-dark:#014F86;

  --color-background-light: #A9D6E5; 
  --color-on-surface: #343a40; 
  --color-muted: #61A5C2; 
  --color-border: #89C2D9; 
}



body {
  background-color: var(--background-light);
  color: var(--text-dark);
}

h1 {
  color: var(--primary-color);
}

.my-button {
  background-color: var(--primary-color);
  color: white;
  border: 1px solid var(--secondary-color);
}