/* Default Light theme styles 
-------------------------------------------------- */
:root {
  /* === Font === */
  --font-primary: sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 13px;
  --font-weight-base: 400;
  --font-weight-navbar: 500;
  
  /* === Color: Core Palette === */
  --color-background: #f0f0f0;
  --color-primary: #ffffff;
  --color-secondary: #f0f0f0;
  --color-tertiary: #ffffff;
  --color-accent: #1e8377;
  --color-primary-button: #23527b; /*#347ab7;*/
  --color-primary-button-text: #ffffff;
  --color-secondary-button: #6c757d;
  --color-secondary-button-text: #ffffff;
  --color-default-button: #ffffff;
  --color-default-button-text: #141415;
  --color-viewer-button: #777;
  --color-link-text: #2f70a9;
  --color-link-visited-text: #800080;
  --color-primary-text: #141415;
  --color-secondary-text: #686868; 
  --color-primary-layout-text: #545454;
  --color-primary-layout-icon: #737373;
  
  --body-font-family: var(--font-primary);
  --body-font-family-secondary: var(--font-secondary);
  --body-font-size: var(--font-size-base);
  --body-font-weight: var(--font-weight-base);
  --body-background-color: var(--color-background);
  --body-text-color: var(--color-primary-text);
  --body-light-background-color: var(--color-tertiary);
  --login-body-background-color: var(--color-background);
  --login-page-copy: "Empowering Content";
  --login-page-secondary-copy: "One Search Finds All";
  
  --text-color-normal: var(--color-primary-text);
  --text-color-disabled: #898989;
  --text-color-muted: var(--color-secondary-text);
  
  /* === Main Header, Footer, Menus and Navigation === */
  --main-header-background-color: var(--color-primary);
  --main-header-text-color: var(--color-primary-layout-text);  
  --main-header-copy: "";
  --main-header-font-family: var(--font-primary);
  --nav-text-color: var(--color-primary-layout-text);
  --nav-link-active: var(--color-accent);
  --nav-icon-color: var(--color-primary-layout-icon);
  --nav-font-weight: var(--font-weight-navbar);
  --footer-background-color: var(--main-header-background-color);
  --footer-text-color: var(--color-primary-layout-text);
  --footer-font-size: 13px;
  --footer-font-weight: var(--font-weight-base);
  --footer-copy: "";
  --resultsbar-header-background-color: var(--color-tertiary);
  --resultsbar-footer-background-color: var(--color-tertiary);
  --searchbar-background-color: var(--color-secondary);
  --pagination-font-color: var(--color-primary-button);
  --pagination-active-font-color: var(--color-primary-button-text);
  --pagination-active-background-color: var(--color-primary-button);  
  --menu-background-normal: var(--color-primary-button);
  --menu-background-normal-text: var(--color-primary-button-text);
  --menu-background-accent: var(--color-primary-button);
  --menu-background-accent-text: var(--color-primary-button-text);
  
  --logo-navbar-url: url('/app/aw-ui-angular/assets/img/knowvation-logo-icon.webp');
  --logo-login-page-large-url: url('/app/aw-ui-angular/assets/img/knowvation-logo-web.webp');
  --logo-login-page-small-url: url('/app/aw-ui-angular/assets/img/knowvation-logo-web.webp');
  --logo-login-modal-url: url('/app/aw-ui-angular/assets/img/knowvation-logo-web.webp');
  --logo-home-page-brand-url: url('/app/aw-ui-angular/assets/img/knowvation-logo-web.webp');
  
  --home-page-brand-copy: "";
  --home-page-brand-font-family: var(--font-primary);
  
  --panel-background-color: var(--color-tertiary);
  --panel-header-background-color: var(--color-tertiary);
  --result-panel-title-color: var(--color-primary-text);

  --accent-color: var(--color-accent);
  --color-danger: #d60000;
  --color-warning: #efac4d;
  --badge-color: var(--color-accent);
  --badge-text-color: #ffffff;
  --toggle-color: var(--color-accent);
  --toggle-background-color: color-mix(in hsl, var(--toggle-color) 30%, #ffffff 60%);  
  
  /* === Links === */
  --link-color: var(--color-link-text);
  --link-color-hover: var(--color-accent); 
  --link-color-contrast: var(--color-link-text);
  --link-color-visited: var(--color-link-visited-text);
  
  /* === Default Button === */
  --button-color-default: var(--color-default-button);
  --button-border-color-default: #cccccc;
  --button-text-color-default: var(--color-default-button-text);
  
  /* === Primary Button === */
  --button-color-primary: var(--color-primary-button);
  --button-text-color-primary: var(--color-primary-button-text);
  --button-color-primary-focus:  color-mix(in hsl, var(--color-primary-button) 70%, #000 30%);
  --button-color-accent: var(--button-color-primary);
  --button-text-color-accent: var(--button-text-color-primary);
  --button-color-accent-focus: var(--button-color-primary-focus); 
  
  /* === Info Button === */ 
  --button-color-info: var(--color-secondary-button);
  --button-text-color-info: var(--color-secondary-button-text);
  --button-color-info-focus: color-mix(in hsl, var(--color-secondary-button) 70%, #000 30%);
  
  /* === Viewer Menu Button === */
  --button-color-viewer-ribbon: var(--color-viewer-button);
  --button-color-viewer-ribbon-separator: var(--color-viewer-button);
}

/* 2.0 theme styles 
-------------------------------------------------- */
html[theme='2.0'] {
  /* === Font === */
  --font-primary: 'Manrope', Helvetica;
  --font-secondary: sans-serif;
  --font-size-base: 14px;
  --font-weight-navbar: 700;
 
   /* === Color: Core Palette === */
  --color-background: #f0f0f0;
  --color-primary: rgba(0, 33, 71, 1);
  --color-secondary: #ddd;
  --color-tertiary: #ffffff;
  --color-accent: #6B551F;
  --color-primary-button: rgba(0, 33, 71, 1);
  --color-secondary-button: #3278b3;
  --color-primary-text: rgba(0, 33, 71, 1);
  --color-primary-layout-text: #ffffff;
  --color-primary-layout-icon: #ffffff;
  --color-link-text: #002147;
  --text-color-disabled: #606060;
  --color-warning: #faa200;
}

/* Indigo theme styles
-------------------------------------------------- */
html[theme='indigo'] {
 /* === Color: Core Palette === */
  --color-background: #f0f0f0;
  --color-primary: #272a68;
  --color-secondary: #f0f0f0;
  --color-tertiary: #ffffff;
  --color-accent: #932d9c;
  --color-primary-button: #363a8e;
  --color-secondary-button: #6c757d;
  --color-viewer-button: #4a4a4a;
  --color-primary-layout-text: #ffffff;
  --color-primary-layout-icon: #a6aaff;
  --color-link-text: #272a68;
  --color-warning: #faa200;
}

/* Dark theme styles
-------------------------------------------------- */
html[theme='dark'] {
  /* === Color: Core Palette === */
  --color-background: #353333;
  --color-primary: #262626;
  --color-secondary: #898888;
  --color-tertiary: #535252;
  --color-accent: #4e6b99;
  --color-primary-button: #262626;
  --color-secondary-button: #6c757d;
  --color-viewer-button: #e1e1e1;
  --color-primary-text: #ffffff;
  --color-secondary-text: #737373;
  --color-primary-layout-text: #ffffff;
  --color-primary-layout-icon: #929292;
  --color-link-text: #ffffff;
  --color-link-visited-text: #dfc0fb;
  --body-light-background-color: #fffbfb;
  --text-color-disabled: #c1c1c1;
}