/* ocean palette */

#peregrine-app {
  --color-accent-1-900: #000653;
  --color-accent-1-800: #001477;
  --color-accent-1-700: #00289B;
  --color-accent-1-600: #0042BF;
  --color-accent-1-500: #054CC6;
  --color-accent-1-400: #186DDB;
  --color-accent-1-300: #237EE5;
  --color-accent-1-200: #5198EC;
  --color-accent-1-100: #81B4F2;
  --color-accent-1-50: #E8F2FF;

  --color-accent-2-100: #ffffff;
  --color-accent-2-200: #f2f2f2;

  --ocean-gradient-1: linear-gradient(-10deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-300);
  --ocean-gradient-1-hover: linear-gradient(-10deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-600);

  --bg-primary: var(--color-accent-2-100);
  --bg-secondary: var(--color-accent-1-50);
  --border-primary-color: rgba(66, 67, 68, 0.2);

  --link-primary-color: var(--color-accent-1-500);
  --link-primary-color-hover: var(--color-accent-1-800);

  --focus-border-color: var(--color-accent-1-500);

  --btn-color: #ffffff;
  --btn-bg: var(--ocean-gradient-1);
  --btn-hover-color: #ffffff;
  --btn-hover-bg: var(--ocean-gradient-1-hover);
  --btn-focus-color: #ffffff;
  --btn-focus-bg: var(--btn-hover-bg);
  --btn-focus-border-color: var(--color-accent-1-300);

  --btn-secondary-color: var(--color-accent-1-500);
  --btn-secondary-bg: var(--color-accent-1-50);
  --btn-secondary-border-width: 0;
  --btn-secondary-border-color: transparent;
  --btn-secondary-hover-color: var(--color-accent-1-800);
  --btn-secondary-hover-bg: var(--color-accent-1-100);
  --btn-secondary-focus-color: var(--btn-secondary-hover-color);
  --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);

  --btn-light-bg: var(--color-accent-1-200);
  --btn-light-color: var(--color-accent-1-900);

  --btn-dark-bg: var(--color-accent-1-900);
  --btn-dark-color: #ffffff;

  --text-primary-color: rgba(0,0,0,0.87);
  --text-secondary-color: rgba(0,0,0,0.6);
}

#peregrine-app .theme-light {
  --bg-primary: var(--color-accent-1-50);
  --bg-secondary: var(--ocean-gradient-1);

  --border-primary-color: rgba(0,0,0,0.1);
}

#peregrine-app .theme-dark,
#peregrine-app .themecleanflex-components-cards.theme-light .card--bg {
  --btn-color: var(--color-accent-1-500);
  --btn-bg: var(--color-accent-1-50);
  --btn-hover-color: var(--color-accent-1-900);
  --btn-hover-bg: var(--color-accent-1-100);
  --btn-focus-color: var(--btn-hover-color);
  --btn-focus-bg: var(--btn-hover-bg);
  --btn-focus-border-color: var(--color-accent-1-200);

  --btn-primary-color: var(--btn-color);
  --btn-primary-bg: var(--btn-bg);
  --btn-primary-hover-color: var(--btn-hover-color);
  --btn-primary-hover-bg: var(--btn-hover-bg);
  --btn-primary-focus-color: var(--btn-focus-color);
  --btn-primary-focus-bg: var(--btn-focus-bg);
  --btn-primary-focus-border-color: var(--btn-focus-border-color);

  --btn-secondary-color: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border-width: 1px;
  --btn-secondary-border-color: #ffffff;
  --btn-secondary-hover-color: var(--btn-secondary-color);
  --btn-secondary-hover-bg: var(--color-accent-1-700);
  --btn-secondary-hover-border-color: rgba(255,255,255,0);
  --btn-secondary-focus-color: var(--btn-secondary-hover-color);
  --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
  --btn-secondary-focus-border-color: var(--btn-focus-border-color);
}

#peregrine-app .theme-dark {
  --bg-primary: var(--ocean-gradient-1);
  --bg-secondary: #ffffff;

  --border-primary-color: rgba(255,255,255,0.6);

  --text-primary-color: rgba(255,255,255,0.87);
  --text-secondary-color: rgba(255,255,255,0.6);

  --link-primary-color: #ffffff;
  --link-primary-color-hover: var(--color-accent-1-50);
  --focus-border-color: var(--color-accent-1-100);
}

/* Individual overwrites */

#peregrine-app [class$='components-cards'].theme-light .card--bg {
  --text-primary-color: rgba(255,255,255,0.87);
  --text-secondary-color: rgba(255,255,255,0.6);
}

#peregrine-app [class$='components-cards'].theme-dark .card--bg,
#peregrine-app [class$='components-accordion'].theme-dark .accordion-container .bg-secondary {
   /* Apply black text colour because otherwise it would render white on white */
  --text-primary-color: rgba(0,0,0,0.87);
  --text-secondary-color: rgba(0,0,0,0.6);
}

#peregrine-app [class$='components-accordion'].theme-light .accordion-container .bg-secondary {
   /* Reduce strong visual noise by removing the default primary background colour */
  --bg-secondary: rgba(255,255,255,0.6);
}

#peregrine-app .theme-light .accordion-container.accordion-container,
#peregrine-app .theme-dark .accordion-container.accordion-container {
  background: transparent;
}

#peregrine-app [class$='components-quote'] {
  --border-primary-color: var(--color-accent-1-700);
}

#peregrine-app .theme-dark[class$="-components-navigation"] a:hover{
  color: var(--color-accent-1-700);
}