@use "sass:color";

$va-blue-dark: #004795;
$blue-hover: darken($va-blue-dark, 10%);
$va-gray-med: #aeb0b5;
$gray-hover: darken($va-gray-med, 10%);

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Bitter:400,600&display=swap&subset=latin-ext");

:root {
  /*
   * Our unique design system variables.
   */
  --va-gray-lightest: #f1f1f1;
  --va-gray-med: #{$va-gray-med};
  --va-gray-darkest: #212121;
  --va-blue-lightest: #f0f6fb;
  --va-blue-dark: #{$va-blue-dark};
  --va-blue-darkest: #112e51;
  --va-gold-lightest: #fff1d2;
  --va-gold-med: #fdb81e;
  --va-gold-dark: #c58702;
  --va-green-lightest: #e7f4e4;
  --va-green: #2e8540;
  --va-green-dark: #195c27;
  --va-red-lightest: #f9dede;
  --va-red-dark: #cd2026;
  --va-red-darker: #981b1e;
  --va-white: #fff;
  --va-black: #212121;

  /* Colors for textfield_counter overrides */
  --color-textfield-counter-warning: var(--va-gold-dark);
  --color-textfield-counter-over: var(--va-red-dark);

  /* claro overrides */
  --color-absolutezero: var(--va-blue-dark);
  --color-absolutezero-hover: var(--va-blue-dark);
  --color-absolutezero-active: var(--va-blue-darkest);
  --color-sunglow: var(--va-gold-med);
  --color-maximumred: var(--va-red-dark);
  --color-lightninggreen: var(--va-green-dark);
  --color-lightgray: var(--va-gray-lightest);
  --color-whitesmoke: var(--va-gray-lightest);
  --color-text: var(--va-gray-darkest);
  --color-grayblue: var(--va-gray-lightest);
  --color-davysgray: var(--va-gray-darkest);
  --color-bgblue-hover: var(--va-blue-lightest);
  --color-bgblue-active: var(--va-blue-lightest);
  --button-fg-color--primary: var(--va-white);
  --button--hover-bg-color--primary: #{$blue-hover};
  --button-bg-color--primary: var(--va-blue-dark);
  --button-bg-color: var(--va-gray-med);
  --button--hover-bg-color: #{$gray-hover};
  --input-fg-color-description--alt: var(--va-gray-darkest);
  --input--hover-border-color: var(--va-blue-darkest);
  --input--disabled-fg-color: var(--va-gray-darkest);

  /* rem size based on :root font-size of 16px, so 1rem = 16px */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-ll: 2rem;
  --spacing-xl: 3rem;

  /* font families */
  --font-family-sans: "Source Sans Pro", sans-serif;
  --font-family-serif: "Bitter", serif;

  /* font sizes */
  --va-display-xl: 48px;
  --va-display-l: 40px;
  --va-display-m: 32px;
  --va-display-s: 24px;
  --va-subsection-s: 18px;
  --va-subsection-xs: 15px;
  --va-text: 18px;
  --va-helptext: 14px;

  --messages__text-margin: 0;

  --focus-outline: 2px dotted transparent;
  --focus-box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--va-green);
  /*
   * Variables originally defined in core/themes/claro (or other modules), overridden here with design system variables.
   */
  --font-family: var(--font-family-sans);

  --color-divider: var(--va-gray-darkest);

  --tabs-hover-bg-color: var(--va-blue-lightest);

  --table-row--dragging-bg-color: var(--va-gold-lightest);
  --table-row--last-dragged-bg-color: var(--va-gold-lightest);

  --jui-dialog-title-bg-color: var(--va-blue-darkest);
}
