/* stylelint-disable color-hex-length */
:root {
  /* MMSG Corp Brand Color Palette */

  /* Primary Brand Colors */
  --mmsg-primary-ink-blue: #003d79;
  --mmsg-primary-dark-blue: #002f68;
  --mmsg-primary-white: #fff;
  --mmsg-basics-black: #202020;
  --mmsg-brand-neutral-400: #ccc;
  --mmsg-messaging-error: #e10004;
  --mmsg-secondary-error-red: #dc2020;

  /* Legacy Color Palettes (maintained for backward compatibility) */
  --forest-error: #dc2020;

  /* White Palette */
  --white-1000: #fff;

  /* Yellow Palette */
  --yellow-500: #ffd337;

  /* Neutral Colors */
  --neutral-100: #f7f7f7;
  --neutral-300: #ccc;
  --neutral-400: #dee2e6;
  --neutral-600: #767676;
  --neutral-900: #333;
  --neutral-1000: #000;
  --primary-base: #003d79;

  /* Semantic Variables */
  --color-brand: var(--mmsg-primary-ink-blue);
  --color-white: var(--white-1000);
  --color-black: var(--neutral-900);
  --color-dark-grey: var(--neutral-900);
  --color-grey: var(--neutral-600);
  --color-light-grey: var(--neutral-100);
  --link-color: var(--neutral-900);
  --color-heading: var(--neutral-900);
  --link-hover-color: var(--mmsg-primary-ink-blue);
  --border-color: var(--neutral-300);
  --border-radius: 10px;
  --border-radius-buttons-secondary: 10px;
  --border-radius-buttons: 10px;
  --border-radius-image: 12px;
  --border-radius-lg: 30px;
  --background-color: var(--white-1000);
  --bg-button: var(--mmsg-primary-ink-blue);
  --bg-button-hover: var(--link-hover-color);
  --color-active-outline: var(--yellow-500);
  --color-focus-outline: var(--yellow-500);
  --color-disabled: var(--neutral-600);
  --button-bg-color: var(--mmsg-primary-ink-blue);
  --button-bg-color-hover: var(--mmsg-primary-ink-blue);
  --notification-text-color: var(--neutral-900);
  --asterisk-required-color: var(--forest-error);

  /* background colors with opacity */
  --bg-color-pastel-blue-opacity-80: #aee1ffcc;
  --bg-color-success-green-opacity-80: #c5e78fcc;
  --bg-color-yellow-opacity-80: #ffe770cc;
  --bg-color-orange-opacity-80: #ffb389cc;
  --bg-color-purple-opacity-80: #daaeffcc;
  --bg-color-error-red-opacity-80: #ffa6b6cc;
  --bg-color-biro-blue-opacity-70: #2e6bfab2;
  --bg-color-white-opacity-70: #ffffffb2;
  --bg-color-black-opacity-20: #00000033;
  --bg-color-button-gradient: linear-gradient(
      0deg,
      var(--bg-color-black-opacity-20) 0%,
      var(--bg-color-black-opacity-20) 100%
    ),
    var(--mmsg-primary-ink-blue);

  /* font */
  --font-size-xxxl: 5rem; /* 80px */
  --font-size-xxxl-alt: 5.3125rem; /* 85px */
  --font-size-xxl: 4rem; /* 64px */
  --font-size-xxl-alt-l: 3.75rem; /* 60px */
  --font-size-xxl-alt: 3.5rem; /* 56px */
  --font-size-xxl-alt-s: 3.3125rem; /* 53px */
  --font-size-xl-alt-l: 3rem; /* 48px */
  --font-size-xl: 2.5rem; /* 40px */
  --font-size-xl-alt: 2.875rem; /* 46px */
  --font-size-lg: 2.5rem; /* 40px */
  --font-size-lg-alt: 2.375rem; /* 38px */
  --font-size-lg-alt-s: 2.25rem; /* 36px */
  --font-size-l-alt: 2rem; /* 32px */
  --font-size-l-m: 1.75rem; /* 28px */
  --font-size-l-sm: 1.625rem; /* 26px */
  --font-size-l: 1.5rem; /* 24px */
  --font-size-l-s: 1.375rem; /* 22px */
  --font-size-m: 1.25rem; /* 20px */
  --font-size-m-alt: 1.1875rem; /* 19px */
  --font-size-s: 1.125rem; /* 18px */
  --font-size-xs: 1rem; /* 16px */
  --font-size-xs-alt: 0.875rem; /* 14px */
  --font-size-xxs: 0.75rem; /* 12px */

  /* fonts line-height line height for h1 to h6 */
  --line-height-tight-l: 1.34;
  --line-height-tight-m-alt: 1.25; /* 60px */
  --line-height-tight-m: 1.2083;
  --line-height-tight-xl: 1.421;
  --line-height-tight-xl-alt: 34px;
  --line-height-m-l: 35px;
  --line-height-tight-xl-alt-l: 40px;
  --line-height-tight-xxl: 1.6842; /* 32px */
  --mmsg-line-height-loose-s-alt: 22px;
  --mmsg-line-height-tight-s-alt: 23px;
  --mmsg-line-height-loose-xs-alt: 24px;
  --mmsg-line-height-loose-xs-l: 25px;
  --mmsg-line-height-loose-xs: 27px;
  --mmsg-line-height-loose-s: 29px;
  --mmsg-line-height-loose-m-alt: 28px;
  --mmsg-line-height-loose-m: 30px;
  --mmsg-line-height-loose-l: 31px;
  --mmsg-line-height-loose-l-alt: 32px;
  --mmsg-line-height-loose-xl: 45px;
  --mmsg-line-height-loose-xxl: 56px;
  --mmsg-line-height-loose-xxxl: 80px;
  --mmsg-line-height-loose-xxxl-m: 96px;

  /* Body font */
  --font-family-body: 'Nunito Sans', 'arial', sans-serif;
  --font-weight-body: 400;
  --font-color-body: var(--color-black);
  --line-height-body: 1.5;

  /* Semibold font */
  /* stylelint-disable-next-line value-keyword-case */
  --font-family-semibold: 'Nunito Sans', 'arial', sans-serif;
  --font-weight-semibold: 600;
  --font-color-semibold: var(--color-black);
  --line-height-semibold: 1.5;

  /* Bold font */
  /* stylelint-disable-next-line value-keyword-case */
  --font-family-bold: 'Nunito Sans', 'arial', sans-serif;
  --font-weight-bold: 700;
  --font-color-bold: var(--color-black);
  --line-height-bold: 1.5;

  /* headings */
  /* stylelint-disable-next-line value-keyword-case */
  --heading-font-family: 'Nunito Sans', 'arial', sans-serif;
  --heading-font-weight: 500;
  --heading-color: var(--color-black);
  --heading-line-height: 1.25;
  --spacing-xxxxs-l: 2px;
  --spacing-xxxxs: 4px;
  --spacing-xxxs-l: 4px;
  --spacing-xxxs-alt: 6px;
  --spacing-xxxs-alt-l: 7px;
  --spacing-xxxs: 8px;
  --spacing-xxs: 10px;
  --spacing-xxs-alt: 11px;
  --spacing-xxs-l: 12px;
  --spacing-xs: 16px;
  --spacing-xs-l: 18px;
  --spacing-xs-m-alt: 19px;
  --spacing-xs-l-alt: 20px;
  --spacing-s: 24px;
  --spacing-m: 32px;
  --spacing-m-l: 35px;
  --spacing-l: 40px;
  --spacing-l-alt: 48px;
  --spacing-l-l: 56px;
  --spacing-l-l-alt: 60px;
  --spacing-xl: 64px;
  --spacing-xl-l-alt: 72px;
  --spacing-xl-l: 80px;
  --spacing-xxl: 96px;
  --spacing-xxl-l: 104px;
  --spacing-xxl-l-alt: 122px;
  --spacing-textarea: 128px;
  --spacing-xxl-negative: -96px;
  --spacing-xxxl: 104px;
  --spacing-negative-xxxs-l: -4px;
  --spacing-negative-xxxs: -8px;
  --spacing-negative-xxs: -10px;
  --spacing-negative-xxs-l: -12px;
  --spacing-negative-xxs-l-alt: -14px;
  --spacing-negative-xs: -16px;
  --spacing-negative-s: -24px;
  --spacing-negative-m-l: -35px;
  --spacing-negative-l: -48px;

  /* layout */
  --max-width-button-small: 190px;
  --max-width-button: 192px;
  --max-height-small: 280px;
  --max-height-medium: 350px;
  --max-height-large: 600px;
  --max-width-small: 375px;
  --max-width-medium: 768px;
  --max-width-large: 1024px;
  --max-width-xlarge: 1440px;
  --max-width-container: 1232px;
  --max-width-container-small: 400px;
  --max-width-container-medium: 816px;
  --z-index: 99;
  --z-index-sticky: 98;

  /* nav */
  --nav-height: 112px;
  --nav-mobile-height: 82px;

  /* box-shadow */
  --box-shadow: 0 2px 4px 0px #0000001a;
  /* stylelint-disable-line */
  --box-shadow-car-card: 0px 4px 4px 0px #00000040;
}