:root {
  /* Colors from the image palette */
  --color-navyblue: #004CB4;  /* Blue from the image */
  --color-lightblue1: #3F8EE8; /* Azure from the image */
  --color-lightblue2: #82AFCE; /* Cerulean from the image */
  --color-green: #50CC7D;     /* Green from the image */
  --color-forest: #00706b;    /* Forest from the image */
  --color-mint: #99E6D1;      /* Mint from the image */
  --color-purple: #521A75;    /* Purple from the image */
  --color-lilac: #C896E2;     /* Lilac from the image */
  --color-magenta: #A00082;   /* Vibrant purple from the image */
  --color-orange: #FA552D;    /* Orange from the image */
  --color-tangerine: #FF9027; /* Tangerine from the image */
  --color-yellow: #FFCD2B;    /* Yellow from the image */
  --color-red: #f44336;       /* Keeping the original red */
  --color-white: #ffffff;
  --color-lightgrey1: #f5f5f5;
  --color-lightgrey2: #eeeeee;
  --color-lightgrey3: #e0e0e0;
  --color-grey1: #757575;
  --color-grey2: #bdbdbd;
  --color-grey3: #9e9e9e;
  --color-darkgrey: #323232;
  
  /* Color semantic aliases */
  --color-primary: var(--color-forest);    /* Using forest green as primary */
  --color-secondary: var(--color-navyblue); /* Using blue as secondary */
  --color-accent: var(--color-tangerine);   /* Using tangerine as accent */
  --color-info: var(--color-lightblue1);
  --color-success: var(--color-green);
  --color-warning: var(--color-orange);
  --color-error: var(--color-red);
  --color-grey: var(--color-grey2);
  --color-lightgrey: var(--color-lightgrey1);
  
  /* State variants - updated with forest green as primary */
  --bg-base: rgba(0, 0, 0, 0.02);
  --bg-hover: rgba(0, 112, 107, 0.1);      /* Forest green with opacity */
  --bg-selected: rgba(0, 112, 107, 0.16);  /* Forest green with opacity */
  --bg-selected-hover: rgba(0, 112, 107, 0.2); /* Forest green with opacity */
  --border-base: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 112, 107, 0.28); /* Forest green with opacity */
  --border-selected: rgba(0, 112, 107, 0.5); /* Forest green with opacity */
  --focus-ring: rgba(0, 112, 107, 0.5);    /* Forest green with opacity */
  
  /* Typography */
  --font-family: Inter, sans-serif ;
  --font-family-mono: "Fira Code", Consolas, Monaco, "Andale Mono", monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Layout */
  --drawer-width-mobile: 280px;
  --drawer-width-desktop: 320px;
  --header-height: 64px;
  --content-max-width: 1600px;
  --footer-max-width: 1440px;
  
  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.25s ease;
  --transition-page: 0.4s ease;
  
  /* Shadows */
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.12);
  
  /* Z-index values */
  --z-index-appbar: 1100;
  --z-index-drawer: 1200;
  --z-index-modal: 1300;
  --z-index-tooltip: 1400;
}