@import '../theme-variables.css';
@import '../idbs-tokens.css';

/* Principle styles for the IDBS Polar theme. */
:root, .idbs-theme-polar {
    --theme-main-900: var(--color-dark-blue-900);
    --theme-main-800: var(--color-dark-blue-800);
    --theme-main-700: var(--color-dark-blue-700);
    --theme-main-600: var(--color-dark-blue-600);
    --theme-main-500: var(--color-dark-blue-500);
    --theme-main-400: var(--color-dark-blue-400);
    --theme-main-300: var(--color-dark-blue-300);
    --theme-main-200: var(--color-dark-blue-200);
    --theme-main-100: var(--color-dark-blue-100);
    --theme-main-50: var(--color-dark-blue-50);
    --theme-main-900-raw: var(--color-dark-blue-900-raw);
    --theme-main-800-raw: var(--color-dark-blue-800-raw);
    --theme-main-700-raw: var(--color-dark-blue-700-raw);
    --theme-main-600-raw: var(--color-dark-blue-600-raw);
    --theme-main-500-raw: var(--color-dark-blue-500-raw);
    --theme-main-400-raw: var(--color-dark-blue-400-raw);
    --theme-main-300-raw: var(--color-dark-blue-300-raw);
    --theme-main-200-raw: var(--color-dark-blue-200-raw);
    --theme-main-100-raw: var(--color-dark-blue-100-raw);
    --theme-main-50-raw: var(--color-dark-blue-50-raw);

    /*
     * Following values should really be specified at the component or application level and should
     * be using --theme-main-xxx or --color-xxx values....
     */
     --button-high-emphasis-normal: var(--theme-main-800);
     --button-high-emphasis-hover: #2648A5;
     --button-high-emphasis-pressed: #00227F;
     --button-high-emphasis-border: transparent;

     --button-medium-emphasis-normal: #F3F5FA;
     --button-medium-emphasis-hover: #E5E9F4;
     --button-medium-emphasis-pressed: #D9DFF0;
     --button-medium-emphasis-border: var(--theme-main-800);
     --button-medium-emphasis-text: var(--theme-main-800);

     --button-low-emphasis-normal: #F3F5FA;
     --button-low-emphasis-hover: #E5E9F4;
     --button-low-emphasis-pressed: #D9DFF0;
     --button-low-emphasis-text: var(--theme-main-800);

     --button-secondary-medium-emphasis-border: var(--theme-main-300);

     /* Navigation bar colors */
     --nav-bar-background: var(--theme-main-700);
     --nav-item-label: var(--color-neutral-white);
}