:root {

/* Base Colors */
--blue-color: #0a488c;
--green-color: #58db33;
--red-color: #e52f2f;
--pink-color: #fc59f8;
--grey-color: #f3f3f3;

/* Neutral Colors */
--black-color: #000000;
--white-color: #ffffff;
--light-grey-color: #fcfcfc; /* Lighter grey (approximate) */
--dark-grey-color: #dadada;  /* Darker grey (approximate) */

/* Primary Colors */
--primary-color: var(--blue-color);
--primary-light-color: #326aa4;  /* Lighter blue (approximate) */
--primary-lighter-color: #4e82b7; /* Even lighter blue (approximate) */

/* Secondary Colors */
--secondary-color: var(--green-color);
--secondary-light-color: #8cf374; /* Lighter green (approximate) */
--secondary-dark-color: #49c01d;  /* Darker green (approximate) */

/* Tertiary Colors (Pink as tertiary) */
--tertiary-color: var(--pink-color);
--tertiary-light-color: #ff87fa;   /* Lighter pink (approximate) */
--tertiary-dark-color: #e250da;    /* Darker pink (approximate) */

/* Text Colors */
--text-color: #4d4d4d;       /* Standard text color: dark grey */
--text-muted-color: #b3b3b3; /* Muted text color: light grey */
--text-inverse-color: var(--white-color); /* Inverse text: pure white */

/* State Colors */
--success-color: var(--green-color); /* Success state: green */
--error-color: var(--red-color);     /* Error state: red */
--warning-color: #ffc107;            /* Warning state: yellow */

/* Neutral Colors */
--neutral-light: var(--light-grey-color); /* General light grey */
--neutral-dark: var(--dark-grey-color);   /* General dark grey */

/* Button Colors */
--button-primary-bg: var(--primary-color);
--button-primary-hover-bg: #145a8e;    /* Hover for primary button (approximate) */
--button-secondary-bg: var(--secondary-color);
--button-secondary-hover-bg: #6fd05d;  /* Hover for secondary button (approximate) */
--button-disabled-bg: var(--neutral-light); /* Disabled button background */
--button-disabled-text: #cccccc;       /* Lighter disabled button text (approximate) */

/* Border Colors */
--border-color: var(--neutral-dark);                   /* Dark grey for borders */
--border-light-color: #fcfcfc;                         /* Light grey for light borders (approximate) */

/* Background Colors */
--background-color: var(--white-color);                /* Main background: white */
--background-alt-color: var(--grey-color);             /* Alternate background: light grey */

/* Utility Colors */
--highlight-color: var(--primary-light-color);         /* Highlighted elements: light blue */
--disabled-color: #bfbfbf;                             /* Disabled elements: light grey (approximate) */
--blockquote-color: var(--neutral-dark);               /* Blockquote text color: dark grey */

/* Menu Colors */
--menu-bg-color: var(--primary-color);
--menu-text-color: var(--text-inverse-color);
--menu-hover-bg: var(--secondary-color);
--menu-hover-text: var(--text-inverse-color);

/* Form Colors */
--form-input-bg: var(--white-color);
--form-input-border: var(--neutral-dark);
--form-input-focus-border: var(--primary-color);
--form-error-border: var(--error-color);
--form-success-border: var(--success-color);

/* Alert Colors */
--alert-success-bg: var(--success-color);
--alert-error-bg: var(--error-color);
--alert-warning-bg: var(--warning-color);
--alert-text-color: var(--white-color);

/* Fonts */
--font-family: 'Noto Sans', sans-serif !important;

/* Border Radius */
--border-radius--sharp: 0px;
--border-radius--pill: 20px;
--border-radius--jumbo: 44px;

/* Box shadows */
--box-shadow--card: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
--box-shadow--info: 0px 0px 12px -9px;

/* Padding And Margin */
--pad: 10px;
--margin: 10px;

}