:root {
  /* Plan Partners Brand Color Palette */

  /* Primary Brand Colors */
  --pp-primary-ink-blue: #020d30;
  --pp-primary-biro-blue: #2e6bfa;
  --pp-primary-marker-blue: #0030cb;
  --pp-primary-pastel-blue: #aee1ff;
  --pp-primary-parchment: #f7f1ec;
  --pp-primary-white: #fff;
  --pp-basics-black: #202020;
  --pp-brand-neutral-400: #ccc;
  --pp-messaging-error: #e10004;

  /* Secondary Brand Colors */
  --pp-secondary-success-green: #c5e78f;
  --pp-secondary-yellow: #ffe770;
  --pp-secondary-orange: #ffb389;
  --pp-secondary-purple: #daaeff;
  --pp-secondary-error-red: #ffa6b6;
  --pp-secondary-link-biro-blue: #0058f8;

  /* Legacy Color Palettes (maintained for backward compatibility) */

  /* Teal Palette */
  --teal-500-tint: #007562;
  --teal-500: #00a78c;
  --teal-400: #80d4c7;
  --teal-300: #cceee9;
  --teal-200: #e5f6f4;

  /* Forest Palette */
  --forest-500-tint: #3f3654;
  --forest-500-2: #a4d389;
  --forest-400: #d0e9c3;
  --forest-300: #e8f5e6;
  --forest-600: #014638;
  --forest-500: #006853;
  --forest-900: #4d4d4d;
  --forest-850: #696969;
  --forest-800: #797979;
  --forest-700: #a6a6a6;
  --forest-500-base: #d2d2d2;
  --forest-400-base: #e9e9e9;
  --forest-300-base: #f4f4f4;
  --forest-1000: #000;
  --forest-950: #111;
  --forest-900-dark: #202020;
  --forest-500-blue: #0047ab;
  --forest-error: #dd1203;
  --forest-outline: #8c8c8c;
  --forest-200: #e5f6f4;

  /* Purple Palette */
  --purple-500-tint: #6c4372;
  --purple-500: #9a5fa3;
  --purple-400: #ccafd1;
  --purple-300: #ebdfed;

  /* Grape Palette */
  --grape-500: #5a5478;

  /* Pink Palette */
  --pink-500: #f97fb5;
  --pink-400: #fcbfda;
  --pink-300: #fee5f0;

  /* Navy Palette */
  --navy-500-tint: #003c53;
  --navy-500: #005677;

  /* Blue Palette */
  --blue-500-tint: #005276;
  --blue-500: #0075a9;
  --blue-400: #80bad4;
  --blue-300: #cce3ee;

  /* Sky Palette */
  --sky-500: #4ac1e0;
  --sky-400: #a4e0ef;
  --sky-300: #dbf3f9;

  /* Rust Palette */
  --rust-500-tint: #993829;
  --rust-500: #d73f28;

  /* Orange Palette */
  --orange-500-tint: #df7f26;
  --orange-500: #f88d2a;
  --orange-400: #fbc694;
  --orange-300: #fee8d4;

  /* Gold Palette */
  --gold-500-tint: #deab00;
  --gold-500: #f7be00;
  --gold-400: #fbde80;
  --gold-300: #fdf2cc;

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

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

  /* Neutral Colors */
  --neutral-300: #ccc;
  --neutral-1000: #000;

  /* Semantic Variables */
  --color-white: var(--white-1000);
  --color-black: var(--pp-primary-ink-blue);
  --color-grey: var(--forest-800);
  --color-error: var(--forest-error);
  --color-pink: var(--pink-500);
  --color-light-pink: var(--pink-400);
  --link-color: var(--pp-secondary-link-biro-blue);
  --link-hover-color: var(--pp-primary-marker-blue);
  --border-color: var(--forest-500-base);
  --border-radius: 4px;
  --border-radius-buttons-secondary: 2px;
  --border-radius-buttons: 4px;
  --border-radius-image: 12px;
  --border-radius-lg: 30px;
  --background-color: var(--white-1000);
  --bg-button-hover: var(--link-hover-color);
  --bg-color-paper: var(--teal-300);
  --bg-color-blue: var(--teal-300);
  --bg-color-light-green: var(--teal-300);
  --bg-color-aqua: var(--teal-300);
  --bg-color-light-blue: var(--teal-300);
  --bg-color-light-grey: var(--forest-400-base);
  --bg-color-green: var(--forest-500);
  --bg-color-neutral: var(--forest-300-base);
  --bg-color-light-beige: var(--teal-300);
  --color-active-outline: var(--pp-primary-ink-blue);
  --color-focus-outline: var(--pp-primary-ink-blue);
  --color-disabled: var(--forest-700);
  --button-bg-color: var(--forest-500);
  --button-bg-color-hover: var(--forest-600);
  --notification-text-color: var(--forest-900-dark);
  --asterisk-required-color: var(--rust-500);

  /* 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;

  /* 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-tight-xl-alt-l: 40px;
  --line-height-tight-xxl: 1.6842; /* 32px */
  --pp-line-height-loose-xs: 27px;
  --pp-line-height-loose-s: 29px;
  --pp-line-height-loose-m: 30px;
  --pp-line-height-loose-l: 31px;
  --pp-line-height-loose-xl: 45px;
  --pp-line-height-loose-xxl: 56px;
  --pp-line-height-loose-xxxl: 80px;
  --pp-line-height-loose-xxxl-m: 96px;

  /* Body font */
  --font-family-body: 'Inclusive 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: 'Inclusive 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: 'Inclusive 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: 'Inclusive Sans', 'arial', sans-serif;
  --heading-font-weight: 500;
  --heading-color: var(--pp-primary-ink-blue);
  --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: 185px;
  --max-width-button: 192px;
  --max-height-small: 280px;
  --max-height-medium: 400px;
  --max-height-large: 608px;
  --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: auto;
  --nav-mobile-height: auto;

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