:root {    
    /* Primary Colors */
    --primary-blue-50: #EEF5FA;
    --primary-blue-100: #E1EAF0;
    --primary-blue-200: #C0D3DA;
    --primary-blue-300: #A4C3CD;
    --primary-blue-400: #7EA9B5;
    --primary-blue-500: #517680;
    --primary-blue-600: #364F56;
    --primary-blue-700: #2C4147;
    --primary-blue-800: #273338;
    --primary-blue-900: #20292C;

    --primary-yellow-100: #FFF9EF;
    --primary-yellow-500: #EEBF34;
    --primary-yellow-700: #CFA016;
    --primary-yellow-800: #CFA016;
    
    --primary-purple: #6E3AA7;

    /* Secondary Colors */
    --secondary-purple: #A487AA;
    --secondary-orange: #D77D49;

    /* Neutral Colors */
    --neutral-white: #FFFFFF;
    --neutral-gray-100: #E5E5E5;
    --neutral-gray-500: #9A9A9A;
    --neutral-gray-600: #7A7575;
    --neutral-gray-800: #393939;
    --neutral-gray-900: #232323;

    /* System Colors */
    --system-green-100: #EBFAEC;
    --system-green-200: #D1EDD3;
    --system-green-400: #DBF2DD;
    --system-green-300: #B7E3B9;
    --system-green-450: #7DCB8F;    /* Between 300 and 500,  spring green: #7DCB8F fresh minty: #90D19B muted 88B28D*/
    --system-green-475: #88B28D;    /*light */
    --system-green-500: #56925A;
    --system-green-600: #317935;
    --system-green-900: #213F3E;

    --system-red-100: #FEF3F3;
    --system-red-200: #FAD2D2;
    --system-red-300: #F6AAAA;
    --system-red-400: #FF7979;
    --system-red-500: #CC5353;
    --system-red-600: #9B3737;
    --system-red-900: #4B3134;


    /* Color tokens */
    --surface-default-primary: var(--primary-blue-100);
    --surface-default-secondary: var(--neutral-white);
    --surface-default-secondary-subdued: var(--neutral-white);
    --surface-default-secondary-subdued-transparent: rgba(255, 255, 255, 0.4);
    --surface-default-tertiary: #E1EAF0;
    --surface-contrast-primary: var(--primary-blue-700);
    --surface-subdued: var(--primary-blue-50);
    --surface-success: var(--system-green-100);
    --surface-critical: var(--system-red-100);
    --surface-footer: var(--primary-blue-100);
    --surface-inactive: #EFEFEF;
    
    --surface-admin: var(--surface-success);
    --surface-sys-admin: #FBE4D7;
    --surface-user: var(--primary-blue-100);
    --text-admin: var(--text-success);
    --text-sys-admin: #893F15;
    --text-user: var(--primary-blue-600);
    
    --surface-contrast-primary-hover: var(--primary-blue-600);
    --surface-default-tertiary-hover: var(--primary-blue-200);

    --text-default-primary: var(--primary-blue-700);
    --text-default-secondary: var(--primary-blue-600);
    --text-subdued-primary: var(--primary-blue-500);
    --text-subdued-secondary: var(--neutral-gray-600);
    --text-contrast-bg-primary: #E1EAF0;
    --text-success: var(--system-green-600);
    --text-critical: var(--system-red-600);

    --icon-default: var(--primary-blue-500);
    --icon-logo: var(--neutral-gray-900); 
    --icon-subdued: #A4C3CD;

    --border-default: var(--primary-blue-300);
    --border-graph: var(--neutral-gray-100);
    --border-subdued: var(--primary-blue-50);

    --chart-contrast-line: var(--primary-yellow-800);
    --chart-default-1: var(--primary-blue-500);
    --chart-default-2: var(--primary-yellow-500);
    --chart-default-3: var(--secondary-purple);
    --chart-default-4: var(--secondary-orange);
    --chart-positive: var(--system-green-500);
    --chart-positive-subdued: var(--system-green-475); /*possible new color*/
    --chart-negative: var(--system-red-600);
    --chart-neutral-light: var(--neutral-gray-100);

    --table-header-row: rgba(255, 255, 255, 0.5);
    --table-sticky-row: var(--primary-blue-50);
    --table-master-row: rgba(255, 255, 255, 0.4);
    --table-alt-row: rgba(225, 234, 240, 0.3);
    --table-row-hover: var(--primary-blue-100);
    --table-border-default: var(--primary-blue-100);
    --table-border-strong: var(--border-default);

    --dropown-hover: var(--primary-blue-200);
    --text-hover: var(--primary-blue-400);

    
    /*GoO colors*/
    --renewable-energy: var(--chart-positive-subdued);
    --fossil-energy: var(--chart-negative);
    --nuclear-energy: var(--primary-purple);
   
    /* Extra */
    --gradient-color-1: #F7F9FF;
    --gradient-color-2: #B5C8D5;
    
    /* Button hover colors */
    --button-critical-surface-hover: var(--system-red-500);
    --button-critical-text-hover: var(--system-red-100);
    --button-success-surface-hover: var(--system-green-500);
    --button-success-text-hover: var(--system-green-100);
    --button-base-surface-hover: var(--primary-blue-500);
    --button-base-text-hover: var(--primary-blue-100);
    
    --button-base-contrast: var(--primary-blue-800);
    --button-base-contrast-text: var(--neutral-white);
}


html[data-theme='dark'] {
    --surface-default-primary: var(--primary-blue-800);
    --surface-default-secondary: var(--primary-blue-900);
    --surface-default-secondary-subdued: var(--primary-blue-700);
    --surface-default-secondary-subdued-transparent: var(--primary-blue-700);
    --surface-default-tertiary: #364F56;
    --surface-contrast-primary: #7EA9B5;
    --surface-subdued: var(--primary-blue-800);
    --surface-success: var(--system-green-900);
    --surface-critical: var(--system-red-900);
    --surface-footer: var(--primary-blue-800);
    --surface-inactive: var(--primary-blue-800);
    
    --surface-contrast-primary-hover: var(--primary-blue-300);
    --surface-default-tertiary-hover: #2C4147;

    --surface-sys-admin: #4E3F37;
    --surface-user: var(--primary-blue-600);

    --text-sys-admin: #F0B08B;
    --text-user: var(--primary-blue-300);
    
    --text-default-primary: var(--primary-blue-300);
    --text-default-secondary: var(--primary-blue-400);
    --text-subdued-primary: var(--primary-blue-400);
    --text-subdued-secondary: var(--primary-blue-400);
    --text-contrast-bg-primary: #2C4147;
    --text-success: var(--system-green-400);
    --text-critical: var(--system-red-400);

    --icon-default: var(--primary-blue-400);
    --icon-logo: var(--primary-blue-300);
    --icon-subdued: #517680;

    --border-default: var(--primary-blue-600);
    --border-graph: var(--primary-blue-600);
    --border-subdued: var(--primary-blue-700);

    --chart-contrast-line: var(--primary-yellow-700);
    --chart-default-1: var(--primary-blue-500);
    --chart-default-2: var(--primary-yellow-700);
    --chart-default-3: var(--secondary-purple);
    --chart-default-4: var(--secondary-orange);
    --chart-positive: var(--system-green-500);
    --chart-positive-subdued: var(--system-green-450); /* possible new color*/
    --chart-negative: var(--system-red-600);
    --chart-neutral-light: var(--primary-blue-700);

    --table-header-row: var(--primary-blue-900);
    --table-sticky-row: var(--primary-blue-900);
    --table-master-row: var(--primary-blue-900);
    --table-alt-row: var(--primary-blue-800);
    --table-row-hover: var(--primary-blue-600);
    --table-border-default: var(--primary-blue-700);
    --table-border-strong: var(--primary-blue-500);

    --dropown-hover: var(--primary-blue-500);
    --text-hover: var(--primary-blue-400);

    /* Extra */
    --gradient-color-1: #2E3B41;
    --gradient-color-2: #1E292E;

    /* Button hover colors */
    --button-critical-surface-hover: var(--system-red-600);
    --button-critical-text-hover: var(--system-red-300);
    --button-success-surface-hover: var(--system-green-600);
    --button-success-text-hover: var(--system-green-200);
    --button-base-surface-hover: var(--primary-blue-600);
    --button-base-text-hover: var(--primary-blue-200);

    --button-base-contrast: var(--neutral-white);
    --button-base-contrast-text: var(--primary-blue-800);
}