// BlueXP style variables.
// This file was generated by @netapp/bxp-style v1.0.5.
// (c) 2025 NetApp. All rights reserved.

@mixin base-colors {
    --white: #FFFFFF;
    --black: #000000;
    --grey-10: #F5F5F5;
    --grey-15: #E0E0E0;
    --grey-20: #CBD4DA;
    --grey-25: #C8C8C8;
    --grey-30: #A7A7A7;
    --grey-40: #858C95;
    --grey-45: #6F6F6F;
    --grey-50: #1C1C1C;
    --grey-55: #4D5765;
    --grey-60: #3A4454;
    --grey-65: #2B323D;
    --grey-70: #111925;
    --grey-75: #060B12;
    --blue-10: #F4FBFF;
    --blue-20: #DDF1FF;
    --blue-25: #C9E7F5;
    --blue-30: #B9D4FF;
    --blue-40: #84B0FF;
    --blue-45: #6C9CEF;
    --blue-50: #0860ED;
    --blue-60: #405EBD;
    --blue-70: #0067C5;
    --blue-80: #1E4A93;
    --red-10: #FFF5F5;
    --red-20: #EB797B;
    --red-30: #DA1E21;
    --red-40: #A30D0F;
    --orange-10: #FFFAF6;
    --orange-12: #FFF2AD;
    --orange-15: #FEAF58;
    --orange-20: #EB9E41;
    --orange-30: #E7BE36;
    --orange-40: #FDC300;
    --orange-50: #F7941D;
    --orange-60: #EF6C01;
    --orange-70: #FE5502;
    --orange-80: #E47C5D;
    --orange-90: #615200;
    --green-10: #F2FCF9;
    --green-20: #ACDA6F;
    --green-30: #B2D234;
    --green-40: #A3B94C;
    --green-50: #68C6B3;
    --green-60: #48A08B;
    --green-70: #316200;
    --cyan-10: #EDF6FF;
    --cyan-20: #5E8DCD;
    --cyan-25: #5EA1FB;
    --cyan-30: #518BEC;
    --cyan-40: #7AC6EF;
    --cyan-45: #80EEF9;
    --cyan-50: #0BAFFC;
    --cyan-55: #2085B1;
    --cyan-60: #95A6F0;
    --cyan-65: #0054D7;
    --cyan-70: #012CAD;
    --purple-01: #EADCFC;
    --purple-02: #DEE0FA;
    --purple-03: #E8EEFD;
    --purple-10: #BB85C7;
    --purple-15: #DE9EFF;
    --purple-16: #AE80FD;
    --purple-17: #E974FC;
    --purple-18: #E424FF;
    --purple-20: #A815F3;
    --purple-22: #7B27FF;
    --purple-25: #6B31AB;
    --purple-30: #550057;
}

@mixin light-theme {
    --background-main: var(--grey-10);                   // Default page background color.
    --background-content: var(--white);                  // Background color for accordion cards, action menus, secondary buttons, cards, date pickers, drag & drop, drop downs, input fields, text fields, dialogs, error messages, tables, left nav, right panels.
    --background-hover: var(--blue-10);                  // Background color in hover states for accordion cards, action menu rows & actions, secondary buttons, some cards, date picker dates, drop down rows and actions, drag & drop rows, input fields actions, main nav category icons and inner links, table rows hover.
    --background-table-header: var(--blue-20);           // Fill color for table header.
    --background-mask: var(--grey-50);                   // Dark background screen overlay.
    --text-primary: var(--grey-50);                      // Used in page titles, section titles, body text, content text (tables, cards, tooltips, etc.), input text (text fields, dropdowns, etc.)
    --text-secondary: var(--grey-45);                    // Used in main nav for categories and services names, cards, days and hours in date picker, optional label in dropdowns, ‘no data’ in empty table.
    --text-disabled: var(--grey-30);                     // Used for placeholder text in dropdowns & text fields, accordion cards, date picker invalid days, drag&drop disabled rows.
    --text-title: var(--blue-70);                        // Used in dialogs, cards, numbered list with title, service name on service bar.
    --text-button-primary: var(--blue-70);               // Used in text button primary, icon button primary.
    --text-button-primary-hover: var(--blue-80);         // Hover color for text and icons in primary buttons.
    --text-button-secondary: var(--grey-45);             // Used in text button secondary, icon button secondary.
    --text-button-secondary-hover: var(--grey-50);       // Hover color for text-button-secondary and icon-button-secondary.
    --text-button-disabled: var(--grey-30);              // Used in text button primary disabled, text button secondary disabled, icon button primary, icon button secondary.
    --text-button-light: var(--blue-70);                 // Used when text links in dark mode are placed on background color of grey-60 or lighter, like show more/less in notifications.
    --text-reversed: var(--white);                       // Used in buttons, tags, removable chips.
    --button-primary-bg: var(--blue-70);                 // Primary button background color.
    --button-primary-bg-hover: var(--blue-80);           // Hover fill for button-primary.
    --button-primary-bg-disabled: var(--grey-15);        // Disabled fill for button-primary
    --button-primary-disabled: var(--grey-30);           // Disabled fill color for button-primary.
    --button-secondary: var(--blue-70);                  // Border and text color for secondary button default state.
    --button-secondary-hover: var(--blue-80);            // Border and text color for secondary button hover state.
    --button-secondary-disabled: var(--grey-30);         // Border and text color for secondary button disabled state.
    --button-card-footer: var(--blue-10);                // Used in card footer for buttons unit.
    --button-card-footer-hover: var(--blue-20);          // Hover color for button-card-footer.
    --button-destructive-bg: var(--red-30);              // For destructive buttons like delete.
    --button-destructive-bg-hover: var(--red-40);        // Hover color for button-destructive-bg
    --selector-off-border: var(--grey-50);               // Border color for checkbox off enabled, radio button off enabled.
    --selector-off-border-hover: var(--grey-45);         // Border color for checkbox off on hover, radio button off on hover.
    --selector-off-border-disabled: var(--grey-30);      // Border color for checkbox off disabled, radio button off disabled.
    --selector-off-bg-disabled: var(--grey-10);          // BG color for checkbox off disabled.
    --selector-on-bg: var(--blue-70);                    // BG color for checkbox on and partial in enabled state , radio button on enabled  and toggle on enabled.
    --selector-on-bg-disabled: var(--grey-30);           // BG color for checkbox on and partial in disabled state , radio button on disabled.
    --selector-on-bg-hover: var(--blue-80);              // BG color for checkbox on and partial in hover state, radio button on hover, toggle on hover.
    --selector-toggle-off: var(--white);                 // BG color for toggle off enabled and hover.
    --selector-toggle-off-bg: var(--grey-25);            // BG color for toggle off enabled.
    --selector-toggle-off-disabled: var(--grey-25);      // BG color for toggle off disabled.
    --selector-toggle-off-bg-hover: var(--grey-30);      // BG color for toggle off hover.
    --selector-date-picker-bg: var(--grey-10);           // Fill color for date picker data cell.
    --selector-item-selection-bg: var(--grey-10);        // BG color for drag & drop rows, drag & drop files, File uploader rows.
    --selector-item-selection-border: var(--white);      // Border color for drag & drop rows, drag & drop files, File uploader rows.
    --icon-primary: var(--blue-70);                      // Primary icons.
    --icon-primary-hover: var(--blue-80);                // Hover color for icon-primary.
    --icon-primary-disabled: var(--grey-30);             // Disabled color for icon-primary.
    --icon-secondary: var(--grey-50);                    // Secondary icons.
    --icon-secondary-hover: var(--grey-45);              // Hover color for icon-secondary.
    --icon-secondary-disabled: var(--grey-30);           // Disabled color for icon-secondary.
    --icon-tertiary: var(--grey-45);                     // Tertiary icons.
    --icon-tertiary-hover: var(--grey-40);               // Hover color for icon-tertiary.
    --icon-tertiary-disabled: var(--grey-30);            // Disabled color for icon-tertiary.
    --icon-reversed-white: var(--white);                 // Icons on block of color.
    --icon-reversed: var(--white);                       // Icons on block of color.
    --icon-round-border: var(--grey-15);                 // Border of round white icons with logos (like AWS).
    --icon-2colors-stroke: var(--cyan-70);               // Used for stroke color in 2-color-icons.
    --icon-2colors-stroke-disabled: var(--grey-30);      // Disabled color for icon-2colors-stroke.
    --icon-2colors-fill-disabled: var(--grey-25);        // Disabled fill color for 2-color icons.
    --chart-1: var(--cyan-70);                           // Dashboards, infographic graph and pie charts.
    --chart-2: var(--cyan-20);                           // Dashboards, infographic graph and pie charts.
    --chart-3: var(--cyan-50);                           // Dashboards, infographic graph and pie charts.
    --chart-4: var(--green-50);                          // Dashboards, infographic graph and pie charts.
    --chart-5: var(--green-30);                          // Dashboards, infographic graph and pie charts.
    --chart-6: var(--orange-40);                         // Dashboards, infographic graph and pie charts.
    --chart-7: var(--orange-50);                         // Dashboards, infographic graph and pie charts.
    --chart-8: var(--orange-70);                         // Dashboards, infographic graph and pie charts.
    --chart-9: var(--purple-20);                         // Dashboards, infographic graph and pie charts.
    --chart-10: var(--purple-30);                        // Dashboards, infographic graph and pie charts.
    --chart-11: var(--purple-15);                        // Dashboards, infographic graph and pie charts.
    --chart-3-gradient: var(--cyan-50);                  // Dashboards, infographic graph and pie charts.
    --chart-9-gradient: var(--purple-20);                // Dashboards, infographic graph and pie charts.
    --chart-background: var(--purple-03);                // Background color for dashboards, infographic graph and pie charts.
    --chart-disabled: var(--grey-15);                    // Disabled color for dashboards, infographic graph & pie charts.
    --chart-brand-12: var(--purple-18);                  // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-13: var(--purple-22);                  // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-14: var(--green-70);                   // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-15: var(--cyan-65);                    // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-16: var(--cyan-45);                    // Brand color for dashboards, infographic graph and pie charts.
    --tag-1-text: var(--cyan-70);                        // Used for “Private preview” tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-1-bg: var(--blue-25);                          // Used for “Private preview” tag background. Can be used in dashboards, infographic graph & pie charts.
    --tag-2-text: var(--purple-25);                      // Used for "Coming soon" tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-2-bg: var(--purple-01);                        // Used for "Coming soon" tag background. Can be used in dashboards, infographic graph & pie charts.
    --tag-3-text: var(--blue-80);                        // Used for "New" tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-3-bg: var(--purple-02);                        // Used for "New" tag background. Can be used in dashboards, infographic graph & pie charts.
    --tag-4-text: var(--orange-90);                      // Used for "Best" tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-4-bg: var(--orange-12);                        // Used for "Best" tag background. Can be used in dashboards, infographic graph & pie charts.
    --notification-error: var(--red-30);                 // Error icons and borders.
    --notification-error-bg: var(--red-10);              // Error background.
    --notification-warning: var(--orange-60);            // Warning icons and borders.
    --notification-warning-bg: var(--orange-10);         // Warning background.
    --notification-information: var(--cyan-30);          // Information icons and borders.
    --notification-information-bg: var(--cyan-10);       // Information background.
    --notification-success: var(--green-60);             // Success icons and borders.
    --notification-success-bg: var(--green-10);          // Success background.
    --notification-group-item-bg: var(--white);          // Grouped item notification background.
    --border-main: var(--grey-15);                       // Stroke used for circle logos, date in date picker, separators in cards, dialogs and tables.
    --border-drop-shadow: var(--grey-15);                // Drop shadow used for cards, tables, dialogs, etc. Relevant for level1 and level2.
    --border-drop-shadow-dialog: var(--grey-45);         // Drop shadow used for cards, tables, etc. Relevant for level1 and level2.
    --border-drop-shadow-toggle: var(--grey-40);
    --border-underline-default: var(--grey-30);          // Used as default underline in cards tabs table and side table.
    --border-underline-selected: var(--blue-70);         // Used as selected underline in cards tabs table and side table.
    --border-scroller: var(--grey-25);                   // Used for page scroller and inner scroller inside components.
    --border-focus-outline: var(--blue-70);              // Used for keyboard focus outlines of elements
    --border-focus-outline-header: var(--white);         // Used for keyboard focus outlines of elements in the header bar
    --field-border: var(--grey-30);                      // Used for dropdown, text field and input field, file uploader field and text area border color.
    --field-border-disabled: var(--grey-25);             // Disabled color for field-border token.
    --field-bg-disabled: var(--grey-10);                 // Disabled background color for field-border token.
    --field-border-selected: var(--blue-70);             // Selected border color for field-border token.
    --field-icon: var(--grey-45);                        // Used for arrow and close icons in dropdowns and close icon in file uploader and drag&drop.
    --field-icon-disabled: var(--grey-25);               // Disabled color for field-icon buttons.
    --shell-main-nav-bg: var(--white);                   // Used in main nav BG color.
    --shell-main-nav-bg-hover: var(--grey-10);           // Used in main nav BG hover color.
    --shell-main-nav-bg-selected: var(--blue-10);        // Used in main nav BG selected color.
    --shell-main-nav-icon-text: var(--grey-45);          // Used for text and icons in main nav: category link and icon, service link, service inner link, (when all are not selected), favorite icon.
    --shell-main-nav-icon-text-selected: var(--blue-70); // Used for main-nav-icon-text in selected mode.
    --shell-browser-primary-bg: var(--grey-15);          // Used for browser component in prototypes.
    --shell-browser-secondary-bg: var(--grey-15);        // Used for browser component in prototypes.
    --shell-browser-bg-stroke: var(--grey-25);           // Used for browser component in prototypes.
    --shell-browser-text-field: var(--white);            // Used for browser component in prototypes.
    --shell-browser-nav-icons: var(--grey-30);           // Used for browser component in prototypes.
    --shell-header-netapp-bg: var(--blue-70);            // Used for NetApp bar in UI shell.
    --shell-header-service-bg: var(--white);             // Used for selected service bar in UI shell.
    --shell-header-netapp-primary-text: var(--white);    // Used for primary text on NetApp bar in UI shell.
    --shell-header-netapp-secondary-text: var(--blue-10); // Used for secondary text on NetApp bar in UI shell.
    --shell-header-netapp-icons: var(--white);           // Used for action icons on NetApp bar in UI shell.
    --shell-header-netapp-text-hover: var(--blue-30);    // Used for primary andn secondary text hover on NetApp bar in UI shell.
    --shell-header-notification-text: var(--blue-80);    // Used for warning, information, and success notifications number in NetApp bar.
    --shell-header-notification-text-2: var(--white);    // Used for error and critical notifications number color and icon in NetApp bar.
    --shell-header-separator-1: var(--white);            // Used for the separator between NetApp bar and selected service bar.
    --shell-header-separator-2: var(--white);            // Used for the separator between selected service bar and the working area under it.
    --shell-main-nav-bg-v2: var(--white);                // Used in main nav BG color.
    --shell-main-nav-bg-hover-v2: var(--grey-10);        // Used in main nav BG hover color.
    --shell-main-nav-bg-selected-v2: var(--blue-10);     // Used in main nav BG selected color.
    --shell-main-nav-icon-text-v2: var(--grey-50);       // Used for text and icons in main nav: category link and icon, service link, service inner link, (when all are not selected), favorite icon.
    --shell-header-notification-text-v2: var(--grey-70); // Used for error and critical notifications number color and icon in NetApp bar.
    --shell-header-notification-text2-v2: var(--white);  // Used for error and critical notifications number color and icon in NetApp bar.
    --shell-browser-primary-bg-v2: var(--grey-15);       // Used for browser component in prototypes.
    --shell-browser-secondary-bg-v2: var(--grey-15);     // Used for browser component in prototypes.
    --shell-browser-nav-icons-v2: var(--grey-30);        // Used for browser component in prototypes.
    --shell-browser-bg-stroke-v2: var(--grey-25);        // Used for browser component in prototypes.
    --shell-browser-text-field-v2: var(--white);         // Used for browser component in prototypes.
    --tooltip-icon-default: var(--grey-30);              // Used for tooltip icons in default state.
    --tooltip-icon-hover: var(--blue-70);                // Used for tooltip icons in hover state.
    --tooltip-icon-disabled: var(--grey-15);             // Used for tooltip icons in disabled state.
    --tooltip-info-bg: var(--white);                     // Used for the tooltip info frame background.
    --loader-wheel-line: var(--blue-70);                 // Used for wheel and line loaders.
    --loader-line-bg: var(--grey-15);                    // Used for the line loader background.
    --loader-dot: var(--cyan-30);                        // Used for dots loader.
    --loader-skeleton: var(--grey-15);                   // Used for skeleton loading in tables and cards.
    --loader-skeleton-bg: var(--grey-10);                // Used for skeleton loading in tables and cards.
}

@mixin dark-theme {
    --background-main: var(--grey-70);                   // Default page background color.
    --background-content: var(--grey-65);                // Background color for accordion cards, action menus, secondary buttons, cards, date pickers, drag & drop, drop downs, input fields, text fields, dialogs, error messages, tables, left nav, right panels.
    --background-hover: var(--grey-60);                  // Background color in hover states for accordion cards, action menu rows & actions, secondary buttons, some cards, date picker dates, drop down rows and actions, drag & drop rows, input fields actions, main nav category icons and inner links, table rows hover.
    --background-table-header: var(--grey-55);           // Fill color for table header.
    --background-mask: var(--grey-40);                   // Dark background screen overlay.
    --text-primary: var(--white);                        // Used in page titles, section titles, body text, content text (tables, cards, tooltips, etc.), input text (text fields, dropdowns, etc.)
    --text-secondary: var(--grey-20);                    // Used in main nav for categories and services names, cards, days and hours in date picker, optional label in dropdowns, ‘no data’ in empty table.
    --text-disabled: var(--grey-40);                     // Used for placeholder text in dropdowns & text fields, accordion cards, date picker invalid days, drag&drop disabled rows.
    --text-title: var(--white);                          // Used in dialogs, cards, numbered list with title, service name on service bar.
    --text-button-primary: var(--blue-40);               // Used in text button primary, icon button primary.
    --text-button-primary-hover: var(--blue-30);         // Hover color for text and icons in primary buttons.
    --text-button-secondary: var(--grey-20);             // Used in text button secondary, icon button secondary.
    --text-button-secondary-hover: var(--grey-15);       // Hover color for text-button-secondary and icon-button-secondary.
    --text-button-disabled: var(--grey-40);              // Used in text button primary disabled, text button secondary disabled, icon button primary, icon button secondary.
    --text-button-light: var(--blue-30);                 // Used when text links in dark mode are placed on background color of grey-60 or lighter, like show more/less in notifications.
    --text-reversed: var(--white);                       // Used in buttons, tags, removable chips.
    --button-primary-bg: var(--blue-50);                 // Primary button background color.
    --button-primary-bg-hover: var(--blue-60);           // Hover fill for button-primary.
    --button-primary-bg-disabled: var(--grey-40);        // Disabled fill for button-primary
    --button-primary-disabled: var(--grey-50);           // Disabled fill color for button-primary.
    --button-secondary: var(--blue-40);                  // Border and text color for secondary button default state.
    --button-secondary-hover: var(--blue-30);            // Border and text color for secondary button hover state.
    --button-secondary-disabled: var(--grey-40);         // Border and text color for secondary button disabled state.
    --button-card-footer: var(--grey-60);                // Used in card footer for buttons unit.
    --button-card-footer-hover: var(--grey-55);          // Hover color for button-card-footer.
    --button-destructive-bg: var(--red-30);              // For destructive buttons like delete.
    --button-destructive-bg-hover: var(--red-40);        // Hover color for button-destructive-bg
    --selector-off-border: var(--white);                 // Border color for checkbox off enabled, radio button off enabled.
    --selector-off-border-hover: var(--grey-20);         // Border color for checkbox off on hover, radio button off on hover.
    --selector-off-border-disabled: var(--grey-40);      // Border color for checkbox off disabled, radio button off disabled.
    --selector-off-bg-disabled: var(--grey-65);          // BG color for checkbox off disabled.
    --selector-on-bg: var(--blue-40);                    // BG color for checkbox on and partial in enabled state , radio button on enabled  and toggle on enabled.
    --selector-on-bg-disabled: var(--grey-40);           // BG color for checkbox on and partial in disabled state , radio button on disabled.
    --selector-on-bg-hover: var(--blue-30);              // BG color for checkbox on and partial in hover state, radio button on hover, toggle on hover.
    --selector-toggle-off: var(--white);                 // BG color for toggle off enabled and hover.
    --selector-toggle-off-bg: var(--grey-25);            // BG color for toggle off enabled.
    --selector-toggle-off-disabled: var(--grey-40);      // BG color for toggle off disabled.
    --selector-toggle-off-bg-hover: var(--grey-30);      // BG color for toggle off hover.
    --selector-date-picker-bg: var(--grey-65);           // Fill color for date picker data cell.
    --selector-item-selection-bg: var(--grey-60);        // BG color for drag & drop rows, drag & drop files, File uploader rows.
    --selector-item-selection-border: var(--grey-40);    // Border color for drag & drop rows, drag & drop files, File uploader rows.
    --icon-primary: var(--white);                        // Primary icons.
    --icon-primary-hover: var(--blue-30);                // Hover color for icon-primary.
    --icon-primary-disabled: var(--grey-40);             // Disabled color for icon-primary.
    --icon-secondary: var(--white);                      // Secondary icons.
    --icon-secondary-hover: var(--grey-20);              // Hover color for icon-secondary.
    --icon-secondary-disabled: var(--grey-40);           // Disabled color for icon-secondary.
    --icon-tertiary: var(--grey-20);                     // Tertiary icons.
    --icon-tertiary-hover: var(--grey-30);               // Hover color for icon-tertiary.
    --icon-tertiary-disabled: var(--grey-40);            // Disabled color for icon-tertiary.
    --icon-reversed-white: var(--white);                 // Icons on block of color.
    --icon-reversed: var(--grey-70);                     // Icons on block of color.
    --icon-round-border: var(--grey-40);                 // Border of round white icons with logos (like AWS).
    --icon-2colors-stroke: var(--white);                 // Used for stroke color in 2-color-icons.
    --icon-2colors-stroke-disabled: var(--grey-40);      // Disabled color for icon-2colors-stroke.
    --icon-2colors-fill-disabled: var(--grey-70);        // Disabled fill color for 2-color icons.
    --chart-1: var(--cyan-60);                           // Dashboards, infographic graph and pie charts.
    --chart-2: var(--cyan-25);                           // Dashboards, infographic graph and pie charts.
    --chart-3: var(--cyan-40);                           // Dashboards, infographic graph and pie charts.
    --chart-4: var(--green-50);                          // Dashboards, infographic graph and pie charts.
    --chart-5: var(--green-40);                          // Dashboards, infographic graph and pie charts.
    --chart-6: var(--orange-30);                         // Dashboards, infographic graph and pie charts.
    --chart-7: var(--orange-20);                         // Dashboards, infographic graph and pie charts.
    --chart-8: var(--orange-80);                         // Dashboards, infographic graph and pie charts.
    --chart-9: var(--purple-15);                         // Dashboards, infographic graph and pie charts.
    --chart-10: var(--grey-20);                          // Dashboards, infographic graph and pie charts.
    --chart-11: var(--purple-10);                        // Dashboards, infographic graph and pie charts.
    --chart-3-gradient: var(--cyan-50);                  // Dashboards, infographic graph and pie charts.
    --chart-9-gradient: var(--purple-20);                // Dashboards, infographic graph and pie charts.
    --chart-background: var(--grey-60);                  // Background color for dashboards, infographic graph and pie charts.
    --chart-disabled: var(--grey-60);                    // Disabled color for dashboards, infographic graph & pie charts.
    --chart-brand-12: var(--purple-17);                  // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-13: var(--purple-18);                  // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-14: var(--green-50);                   // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-15: var(--cyan-50);                    // Brand color for dashboards, infographic graph and pie charts.
    --chart-brand-16: var(--cyan-55);                    // Brand color for dashboards, infographic graph and pie charts.
    --tag-1-text: var(--cyan-70);                        // Used for “Private preview” tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-1-bg: var(--blue-25);                          // Used for “Private preview” tag background. Can be used in dashboards, infographic graph & pie charts.
    --tag-2-text: var(--purple-25);                      // Used for "Coming soon" tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-2-bg: var(--purple-01);                        // Used for "Coming soon" tag background. Can be used in dashboards, infographic graph & pie charts.
    --tag-3-text: var(--blue-80);                        // Used for "New" tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-3-bg: var(--purple-02);                        // Used for "New" tag background. Can be used in dashboards, infographic graph & pie charts.
    --tag-4-text: var(--orange-90);                      // Used for "Best" tag text. Can be used in dashboards, infographic graph & pie charts.
    --tag-4-bg: var(--orange-12);                        // Used for "Best" tag background. Can be used in dashboards, infographic graph & pie charts.
    --notification-error: var(--red-20);                 // Error icons and borders.
    --notification-error-bg: var(--grey-60);             // Error background.
    --notification-warning: var(--orange-15);            // Warning icons and borders.
    --notification-warning-bg: var(--grey-60);           // Warning background.
    --notification-information: var(--blue-40);          // Information icons and borders.
    --notification-information-bg: var(--grey-60);       // Information background.
    --notification-success: var(--green-20);             // Success icons and borders.
    --notification-success-bg: var(--grey-60);           // Success background.
    --notification-group-item-bg: var(--grey-60);        // Grouped item notification background.
    --border-main: var(--grey-55);                       // Stroke used for circle logos, date in date picker, separators in cards, dialogs and tables.
    --border-drop-shadow: var(--grey-70);                // Drop shadow used for cards, tables, dialogs, etc. Relevant for level1 and level2.
    --border-drop-shadow-dialog: var(--grey-70);         // Drop shadow used for cards, tables, etc. Relevant for level1 and level2.
    --border-drop-shadow-toggle: var(--grey-65);
    --border-underline-default: var(--grey-40);          // Used as default underline in cards tabs table and side table.
    --border-underline-selected: var(--blue-40);         // Used as selected underline in cards tabs table and side table.
    --border-scroller: var(--grey-40);                   // Used for page scroller and inner scroller inside components.
    --border-focus-outline: var(--blue-40);              // Used for keyboard focus outlines of elements
    --border-focus-outline-header: var(--blue-40);       // Used for keyboard focus outlines of elements in the header bar
    --field-border: var(--grey-20);                      // Used for dropdown, text field and input field, file uploader field and text area border color.
    --field-border-disabled: var(--grey-40);             // Disabled color for field-border token.
    --field-bg-disabled: var(--grey-60);                 // Disabled background color for field-border token.
    --field-border-selected: var(--blue-40);             // Selected border color for field-border token.
    --field-icon: var(--grey-20);                        // Used for arrow and close icons in dropdowns and close icon in file uploader and drag&drop.
    --field-icon-disabled: var(--grey-40);               // Disabled color for field-icon buttons.
    --shell-main-nav-bg: var(--grey-65);                 // Used in main nav BG color.
    --shell-main-nav-bg-hover: var(--grey-60);           // Used in main nav BG hover color.
    --shell-main-nav-bg-selected: var(--grey-60);        // Used in main nav BG selected color.
    --shell-main-nav-icon-text: var(--grey-20);          // Used for text and icons in main nav: category link and icon, service link, service inner link, (when all are not selected), favorite icon.
    --shell-main-nav-icon-text-selected: var(--cyan-40); // Used for main-nav-icon-text in selected mode.
    --shell-browser-primary-bg: var(--grey-50);          // Used for browser component in prototypes.
    --shell-browser-secondary-bg: var(--grey-70);        // Used for browser component in prototypes.
    --shell-browser-bg-stroke: var(--grey-70);           // Used for browser component in prototypes.
    --shell-browser-text-field: var(--grey-70);          // Used for browser component in prototypes.
    --shell-browser-nav-icons: var(--grey-30);           // Used for browser component in prototypes.
    --shell-header-netapp-bg: var(--grey-65);            // Used for NetApp bar in UI shell.
    --shell-header-service-bg: var(--grey-65);           // Used for selected service bar in UI shell.
    --shell-header-netapp-primary-text: var(--white);    // Used for primary text on NetApp bar in UI shell.
    --shell-header-netapp-secondary-text: var(--grey-15); // Used for secondary text on NetApp bar in UI shell.
    --shell-header-netapp-icons: var(--grey-15);         // Used for action icons on NetApp bar in UI shell.
    --shell-header-netapp-text-hover: var(--blue-40);    // Used for primary andn secondary text hover on NetApp bar in UI shell.
    --shell-header-notification-text: var(--grey-70);    // Used for warning, information, and success notifications number in NetApp bar.
    --shell-header-notification-text-2: var(--grey-70);  // Used for error and critical notifications number color and icon in NetApp bar.
    --shell-header-separator-1: var(--grey-40);          // Used for the separator between NetApp bar and selected service bar.
    --shell-header-separator-2: var(--grey-55);          // Used for the separator between selected service bar and the working area under it.
    --shell-main-nav-bg-v2: var(--grey-65);              // Used in main nav BG color.
    --shell-main-nav-bg-hover-v2: var(--grey-60);        // Used in main nav BG hover color.
    --shell-main-nav-bg-selected-v2: var(--grey-60);     // Used in main nav BG selected color.
    --shell-main-nav-icon-text-v2: var(--grey-20);       // Used for text and icons in main nav: category link and icon, service link, service inner link, (when all are not selected), favorite icon.
    --shell-header-notification-text-v2: var(--grey-70); // Used for error and critical notifications number color and icon in NetApp bar.
    --shell-header-notification-text2-v2: var(--grey-70); // Used for error and critical notifications number color and icon in NetApp bar.
    --shell-browser-primary-bg-v2: var(--grey-50);       // Used for browser component in prototypes.
    --shell-browser-secondary-bg-v2: var(--grey-70);     // Used for browser component in prototypes.
    --shell-browser-nav-icons-v2: var(--grey-30);        // Used for browser component in prototypes.
    --shell-browser-bg-stroke-v2: var(--grey-70);        // Used for browser component in prototypes.
    --shell-browser-text-field-v2: var(--grey-65);       // Used for browser component in prototypes.
    --tooltip-icon-default: var(--grey-20);              // Used for tooltip icons in default state.
    --tooltip-icon-hover: var(--blue-40);                // Used for tooltip icons in hover state.
    --tooltip-icon-disabled: var(--grey-40);             // Used for tooltip icons in disabled state.
    --tooltip-info-bg: var(--grey-70);                   // Used for the tooltip info frame background.
    --loader-wheel-line: var(--blue-40);                 // Used for wheel and line loaders.
    --loader-line-bg: var(--grey-60);                    // Used for the line loader background.
    --loader-dot: var(--blue-40);                        // Used for dots loader.
    --loader-skeleton: var(--grey-60);                   // Used for skeleton loading in tables and cards.
    --loader-skeleton-bg: var(--grey-55);                // Used for skeleton loading in tables and cards.
}