:root {
  /* Gov Primary Color Set */
  --color-primary-50: #e9f8ee !important;
  --color-primary-100: #c9f0d3 !important;
  --color-primary-200: #a2e6b5 !important;
  --color-primary-300: #78db97 !important;
  --color-primary-400: #32b768 !important;
  --color-primary-500: #249c58 !important;
  --color-primary-600: #1b824b !important; /* Main — contrast ratio 4.67:1 on white */
  --color-primary-700: #15693e !important;
  --color-primary-800: #0d4a2c !important;
  --color-primary-900: #093b21 !important;
  --color-primary-950: #092d1b !important;
  --color-primary-1000: #102218 !important;
  --color-primary-1100: #08120d !important;
  /* Gov Secondary Color Set */
  --color-secondary-50: #e6f3fc !important;
  --color-secondary-100: #cce6f8 !important;
  --color-secondary-200: #9cd0f0 !important;
  --color-secondary-300: #73b4e4 !important;
  --color-secondary-400: #5298d3 !important;
  --color-secondary-500: #3e7fbe !important;
  --color-secondary-600: #2d69b0 !important;
  --color-secondary-700: #245595 !important;
  --color-secondary-800: #1d4578 !important;
  --color-secondary-900: #17365c !important;
  --color-secondary-950: rgb(19, 38, 62) !important;
  --color-secondary-1000: #0f1d2d !important; /* Used for footer background */
  --color-secondary-1100: #0a131e; /* Used for footer background */
  /* Other Gov */
  --icon-on-subtle: var(--color-primary-600) !important;
  --text-black-fixed: white !important;
  --button-solid-primary-hover: var(--color-primary-700) !important;
  /* --button-solid-primary: var(--color-primary-700) !important; */
  /* Custom */
  --banner-button-border-color: var(--background-page);
  /* Footer */
  --footer-link-color: white;
  --footer-divider-color: white;
  --footer-text-color: white;
  --contact-icon-color: white;
  --scroll-up-button-color: var(--color-secondary-700);
  --footer-social-link-color: var(--color-secondary-700);
  --button-solid-primary-disabled: rgb(30, 30, 30) !important;

  /* --a-class-color: #005a27;
  --b-class-color: #2e7d32;
  --c-class-color: #b59f00;
  --d-class-color: #7a701c;
  --e-class-color: #c66900;
  --f-class-color: #c34441;
  --g-class-color: #b71c1c; */

  --a-class-color: #009639;
  --b-class-color: #78be20;
  --c-class-color: #ffd100;
  --d-class-color: #ffa300;
  --e-class-color: #ff6500;
  --f-class-color: #ed1c24;
  --g-class-color: #a50000;

  --pass-report-background: rgb(245, 245, 245);
  --pass-report-footer-lightblue: #34a790;
  --pass-report-footer-darkblue: #2f46ad;

  --pass-preview-height: 83rem;

  --locked-pass-icon-color: black;
  --pass-finalized-background: color-mix(
    in srgb,
    var(--color-primary-200) 95%,
    white
  );
  --pass-shared-background: color-mix(
    in srgb,
    var(--color-secondary-300) 50%,
    white
  );
}

:root[data-theme="light"] {
  /* Gov */
  --background-page: rgb(240, 240, 240) !important;
  --text-primary-color: var(--color-primary-600) !important;
  --button-base-primary-hover: var(--color-primary-50) !important;
  --button-outlined-primary-hover: var(--color-secondary-100) !important;
  --button-outlined-primary-active: var(--color-primary-50) !important;
  --button-solid-secondary-hover: var(--color-secondary-700) !important;

  /* Custom */
  --banner-description-primary-background: var(--color-primary-100);
  --banner-description-primary-color: var(--color-primary-700);
  --banner-description-secondary-background: var(--color-secondary-100);
  --banner-description-secondary-color: var(--color-secondary-700);
  --calc-tool-bubble-text-color: var(--color-secondary-800);

  --pass-action-button-background: white;
  --pass-action-button-disabled-background: rgb(220, 220, 220);
  --pass-action-button-color: rgb(30, 30, 30);
  --pass-action-button-disabled-color: rgb(160, 160, 160);

  --pass-buttons-background: rgb(240, 240, 240);
  --pass-uncalculated-background: color-mix(
    in srgb,
    var(--color-warning-200) 80%,
    white
  );

  --login-for-info-background: white;
  --footer-background-color: var(--color-secondary-900);
  --search-clear-button-color: var(--color-error-500);
}

:root[data-theme="dark"] {
  /* Gov */
  --background-page: rgb(15, 15, 15) !important;
  --text-primary-color: var(--color-primary-50) !important;
  --button-solid-primary: var(--color-primary-800) !important;
  --button-solid-secondary: var(--color-secondary-900) !important;
  --button-solid-error: var(--color-error-800) !important;
  --button-solid-error-hover: var(--color-error-700) !important;
  --interactive-active: var(--button-solid-primary) !important;
  --button-outlined-primary-hover: var(--button-solid-secondary) !important;
  --button-solid-secondary-hover: var(--color-secondary-800) !important;

  /* Custom */
  --banner-description-primary-background: var(--color-primary-900);
  --banner-description-primary-color: var(--color-primary-100);
  --banner-description-secondary-background: var(--color-secondary-900);
  --banner-description-secondary-color: var(--color-secondary-100);
  --calc-tool-bubble-text-color: var(--banner-bubble-text-color);

  --pass-action-button-background: rgb(50, 50, 50);
  --pass-action-button-disabled-background: rgb(35, 35, 35);
  --pass-action-button-color: rgb(230, 230, 230);
  --pass-action-button-disabled-color: rgb(120, 120, 120);

  --pass-buttons-background: rgb(30, 30, 30);

  --pass-uncalculated-background: color-mix(
    in srgb,
    var(--color-warning-200) 50%,
    white
  );

  --login-for-info-background: rgb(20, 20, 20);
  --footer-background-color: var(--color-secondary-1000);
  --search-clear-button-color: var(--color-error-300);

  /* PassReport */
  /* --e-class-color: #ffb74d;
  --c-class-color: #ffd600;
  --b-class-color: #81c784;
  --a-class-color: #00c853; */
}

@media (max-width: 57rem) {
  :root {
    --pass-preview-height: 72rem;
  }
}

@media (max-width: 44rem) {
  :root {
    --pass-preview-height: 56rem;
  }
}

@media (max-width: 34rem) {
  :root {
    --pass-preview-height: 42rem;
  }
}
@media (max-width: 26.5rem) {
  :root {
    --pass-preview-height: 34rem;
  }
}