/* stylelint-disable */
[data-theme="theme-ev"], .theme-ev {
  --font-family-base: "Public Sans", sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.3125rem; /* 21px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.8125rem; /* 29px */
  --font-size-4xl: 2rem; /* 32px */
  --font-size-5xl: 2.5rem; /* 40px */

  --line-height-xs: 1rem; /* 18px */
  --line-height-sm: 1.25rem; /* 20px */
  --line-height-md: 1.5rem; /* 24px */
  --line-height-lg: 1.6875rem; /* 27px */
  --line-height-xl: 1.75rem; /* 28px */
  --line-height-2xl: 1.875rem; /* 30px */
  --line-height-3xl: 2.25rem; /* 36px */
  --line-height-4xl: 2.438rem; /* 39px */
  --line-height-5xl: 2.75rem; /* 44px */

  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */


  --shadow-rest: 0 0 0.25rem rgba(0, 0, 0, 0.2);
  --shadow-raised: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.05);
  
  /* colors */
  --brand-primary-blue: #2F5DA8;
  --brand-primary-teal: #1FB6AA;
  --brand-primary-steel: #5F6B7A;
  --brand-primary-navy: #0B1F3A;

  --brand-neutral-snow: #F7F9FC;
  --brand-neutral-white: #FFFFFF;
  --brand-neutral-black: #000000;
  --brand-neutral-gray: #767676;
  --brand-neutral-mint: #D4F3F3;
  --brand-neutral-olive-gray: #36403E;

  /** fixed colours */

  --primary-color: var(--brand-primary-blue);
  --secondary-color: var(--brand-primary-teal);
  --tertiary-color: var(--brand-primary-steel);
  --accent-color: var(--brand-primary-navy);

  /* status colors */
  --status-success: #007A1E;
  --status-success-bg: rgba(0, 122, 30, 0.1);
  --status-success-bg-200: rgba(0, 122, 30, 0.2);
  --status-warning: #C25700;
  --status-warning-bg: rgba(194, 87, 0, 0.1);
  --status-error: #C62828;
  --status-error-bg: rgba(198, 40, 40, 0.1);
  --status-info: #0175AF;
  --status-info-bg: rgba(1, 117, 175, 0.05);
  --status-info-bg-100: rgba(1, 117, 175, 0.1);
  --status-secondary: var(--brand-primary-steel); /* from my Account */
  --status-secondary-bg: rgba(118, 118, 118, 0.1); /* from my Account */
  --status-primary: var(--brand-primary-blue); /* from my Account */
  --status-primary-bg: rgba(41, 56, 150, 0.1); /* from my Account */
  --status-primary-bg-200: rgba(41, 56, 150, 0.2); /* from my Account */
  --status-accent: var(--brand-primary-navy); /* from my Download center */
  --status-accent-bg: rgba(31, 182, 170, 0.12); /* from my Download center */
  --status-accent-bg-100: rgba(31, 182, 170, 0.03); /* from my Download center */
  --status-accent-bg-1000: var(--brand-neutral-mint); 

  /* text colors */
  --color-text-primary: var(--brand-neutral-black);
  --color-text-secondary: var(--brand-primary-steel);
  --color-text-ternary: var(--brand-primary-blue); 
  --color-text-muted: var(--brand-neutral-gray);
  --color-text-inverse: var(--brand-neutral-white);
  --color-text-disabled: var(--brand-neutral-gray); 
  --color-text-accent: var(--brand-neutral-olive-gray);

  /* border colors */
  --border-default: var(--brand-neutral-gray);
  --border-strong: var(--brand-primary-blue);
  --border-subtle: var(--brand-primary-steel); 
  --border-disabled: var(--brand-neutral-gray);
  --border-focus: var(--brand-primary-blue);

  /* background colors */
  --bg-page: var(--brand-neutral-white);
  --bg-surface: var(--brand-neutral-snow);
  --bg-surface-subtle: var(--brand-neutral-gray);
  --bg-header: var(--brand-neutral-white);
  --bg-footer: var(--brand-primary-blue);
  --bg-first-fold: rgba(31, 182, 170, 0.07);
  --bg-breadcrumb: rgba(47, 93, 168, 0.03); 
  --bg-primary-50: rgba(47, 93, 168, 0.05);
  --bg-primary-100: rgba(47, 93, 168, 0.1);
  --bg-primary-200: rgba(47, 93, 168, 0.2);
  --bg-primary-300: rgba(47, 93, 168, 0.3);
  --bg-primary-500: rgba(47, 93, 168, 0.5);
  --bg-secondary-50: rgba(31, 182, 170, 0.05); 
  --bg-secondary-100: rgba(31, 182, 170, 0.1); 
  --bg-secondary-200: rgba(31, 182, 170, 0.2);
  --bg-secondary-300: rgba(31, 182, 170, 0.3);
  --bg-secondary-400: rgba(31, 182, 170, 0.4);
  --bg-tertiary-50: rgba(95, 107, 122, 0.05);
  /* modal*/
  --bg-modal-box-400: rgba(0, 0, 0, 0.4);
  --bg-modal-box-500: rgba(0, 0, 0, 0.5);
  --bg-modal-box-600: rgba(0, 0, 0, 0.6);

  --bg-linear-gradient-primary: linear-gradient(90deg, var(--brand-primary-teal) 0%, rgb(0, 100, 92) 107.15%); /* review */
  --bg-linear-gradient-secondary: linear-gradient(90deg, var(--brand-primary-teal) 0%, var(--brand-primary-blue) 100%);

  --action-primary-bg: var(--brand-primary-blue);
  --action-primary-bg-hover: rgba(47, 93, 168, 0.8);
  --action-primary-text: var(--brand-neutral-white);
  --action-primary-border: var(--brand-primary-blue);

  --action-secondary-bg: transparent;
  --action-secondary-bg-hover: var(--brand-neutral-snow);
  --action-secondary-text: var(--brand-primary-blue);
  --action-secondary-border: var(--brand-primary-blue);

  --action-tertiary-bg: rgba(31, 182, 170, 0.03); /* review */
  --action-tertiary-bg-hover: var(--brand-neutral-snow);
  --action-tertiary-text: var(--brand-neutral-black);
  --action-secondary-border: var(--brand-primary-steel);


  --action-disabled-bg: rgba(118, 118, 118, 0.2);
  --action-disabled-bg-subtle: var(--brand-neutral-snow);
  --action-disabled-text: var(--brand-neutral-white);
  --action-disabled-border: var(--brand-neutral-gray);

  /* Link status colors */
  --link-primary: var(--brand-primary-blue);
  --link-primary-hover: var(--brand-primary-blue);
  --link-secondary: var(--brand-neutral-black);
  --link-secondary-hover: var(--brand-neutral-black);
  --link-tertiary: var(--brand-neutral-white);
  --link-tertiary-hover: var(--brand-neutral-white);
  --link-disabled: var(--brand-primary-steel);
  --link-disabled-hover: var(--brand-primary-steel);

  --shadow-default: var(--shadow-rest);
  --shadow-elevated: var(--shadow-raised);
  --dropdown-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.05);


  /* spacing  */
  --spacing-2xs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */   
  --spacing-lg: 1.25rem; /* 20px */
  --spacing-xl: 1.5rem; /* 24px */  
  --spacing-2xl: 2rem; /* 32px */
  --spacing-3xl: 2.5rem; /* 40px */
  --spacing-4xl: 3rem; /* 48px */
  /*opacity */
  --opacity-reset: 1; /* Reset opacity */
  --opacity-light: 0.2; /* Light opacity */
  --opacity-muted: 0.7;
  --opacity-hover: 0.8; /* Hover state opacity */
  --opacity-disabled: 0.5; /* Disabled state opacity */
  --opacity-faded: 0.6; /* Faded text/icon opacity */
  --opacity-hover-strong: 0.9; /* Strong hover state opacity */
  --opacity-select: var(--opacity-hover);
  /* z-index */
  --z-index-dropdown: 1;
  --z-index-modal: 10;
  --z-index-popover: 5;
  --z-index-tooltip: 2;
  --z-index-header: 90;
  /* Transition */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /** conatiner widths */
  --contant-container-width: 1360px;
  
}