[data-theme='theme-arctera'],
.theme-arctera {
  --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; /* 16px */
  --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 */

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

  /* border radius */

  --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 rgb(0 0 0 / 20%);
  --shadow-raised: 0 0.5rem 2.5rem rgb(0 0 0 / 5%);

  /* colors */
  --brand-primary-blue: #255989;
  --brand-primary-bright-orange: #f7941d;
  --brand-primary-orange: #f26522;
  --brand-primary-blue-grey: #15334f;
  --brand-primary-turquoise: #41bfa6;
  --brand-primary-dark-blue: #002b41;
  --brand-neutral-sea-blue: #9cd8d5;
  --brand-neutral-mist: #E7EFF2;
  --brand-neutral-tea-green: #c7e9e5;
  --brand-neutral-lavendar: #4b5280;
  --brand-neutral-light-grey: #f2f2f2;
  --brand-neutral-olive-grey: #36403e;
  --brand-neutral-cool-white: #f7fdff;
  --brand-neutral-black: #000;
  --brand-neutral-snow: #f7f9fc;
  --brand-neutral-white: #fff;
  --brand-neutral-gray: #767676;
  --brand-neutral-mint: #d4f3f3;
  --brand-neutral-olive-gray: #36403e;

  /** fixed colors */
  --primary-color: var(--brand-primary-blue);
  --secondary-color: var(--brand-primary-orange);
  --ternary-color: var(--brand-primary-bright-orange);
  --accent-color: var(--brand-primary-dark-blue);

  /* status colors */
  --status-success: #007a1e;
  --status-success-bg: rgb(0 122 30 / 10%);
  --status-success-bg-200: rgb(0 122 30 / 20%);
  --status-warning: #c25700;
  --status-warning-bg-light: rgb(194 87 0 / 3%);
  --status-warning-bg: rgb(194 87 0 / 10%);
  --status-error: #c62828;
  --status-error-bg-light: rgb(198 40 40 / 3%);
  --status-error-bg: rgb(198 40 40 / 10%);
  --status-info: #0175af;
  --status-info-bg: rgb(1 117 175 / 5%);
  --status-info-bg-light: rgb(1 117 175 / 10%);
  --status-secondary: var(
    --brand-primary-blue-grey
  ); /* from my Account add bg for this  */

  --status-secondary-bg: rgb(242 242 242 / 100%); /* from my Account */
  --status-primary: var(--brand-primary-blue); /* from my Account */
  --status-primary-bg: rgb(1 117 175 / 10%); /* from my Account */
  --status-primary-bg-200: rgb(1 117 175 / 20%); /* from my Account */
  --status-accent: var(
    --brand-neutral-olive-grey
  ); /* from my Download center */

  --status-accent-bg: rgb(118 118 118 / 10%); /* from my Download center */
  --status-accent-bg-100: rgb(
    31
    182
    170 /
    3%
  ); /* from my Download center */

  --status-accent-bg-solid: var(--brand-neutral-sea-blue);

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

  /* 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-ternary: var(--brand-neutral-white);
  --link-ternary-hover: var(--brand-neutral-white);
  --link-disabled: var(--brand-neutral-gray);
  --link-disabled-hover: var(--brand-neutral-gray);

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

  /* background colors */
  --bg-page: var(--brand-neutral-white);
  --bg-page-500: rgb(255 255 255 / 80%);
  --bg-surface: var(--brand-neutral-white);
  --bg-surface-subtle: var(--brand-neutral-light-grey);
  --bg-header: var(--brand-neutral-white);
  --bg-footer: var(--bg-linear-gradient-primary);
  --bg-first-fold: rgb(242 101 34 / 5%);
  --bg-breadcrumb: rgb(242 101 34 / 3%);
  --bg-primary-50: rgb(37 89 137 / 5%);
  --bg-primary-100: rgb(37 89 137 / 10%);
  --bg-primary-200: rgb(37 89 137 / 20%);
  --bg-primary-300: rgb(37 89 137 / 30%);
  --bg-primary-500: rgb(37 89 137 / 50%);
  --bg-secondary-50: rgb(242 101 34 / 5%);
  --bg-secondary-100: rgb(242 101 34 / 10%);
  --bg-secondary-200: rgb(242 101 34 / 20%);
  --bg-secondary-300: rgb(242 101 34 / 30%);
  --bg-secondary-400: rgb(242 101 34 / 40%);
  --bg-ternary-50: rgb(54 64 62 / 10%);
  --bg-ternary-200: rgb(54 64 62 / 20%);
  --bg-ternary-300: rgb(54 64 62 / 30%);
  --tab-active-bg: var(--brand-neutral-mist);
  --tab-active-text: var(--color-text-brand);

  /* modal */
  --bg-modal-box-400: rgb(0 0 0 / 40%);
  --bg-modal-box-500: rgb(0 0 0 / 50%);
  --bg-modal-box-600: rgb(0 0 0 / 60%);
  --bg-linear-gradient-primary: linear-gradient(
    270deg,
    var(--brand-primary-blue-grey) 0%,
    var(--brand-primary-blue) 100%
  ); /* review */

  --bg-linear-gradient-secondary: linear-gradient(
    90deg,
    var(--brand-primary-turquoise) 0%,
    var(--brand-primary-dark-blue) 100%
  );
  --bg-linear-gradient-ternary: linear-gradient(
    90deg,
    var(--brand-primary-blue) 0%,
    var(--brand-primary-blue-grey) 100%
  );
  --action-primary-bg: var(--bg-linear-gradient-ternary);
  --action-primary-bg-hover: var(--bg-linear-gradient-ternary);
  --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-gray);
  --action-secondary-text: var(--brand-primary-blue);
  --action-secondary-border: var(--brand-primary-blue);
  --action-ternary-bg: rgb(65 191 166 / 3%);
  --action-ternary-bg-hover: var(--brand-neutral-cool-white);
  --action-ternary-text: var(--brand-neutral-black);
  --action-ternary-border: var(--brand-neutral-olive-grey);
  --action-disabled-bg: rgb(118 118 118 / 50%);
  --action-disabled-bg-subtle: var(--brand-neutral-gray);
  --action-disabled-text: var(--brand-neutral-white);
  --action-disabled-border: var(--brand-neutral-gray);
  --shadow-default: var(--shadow-rest);
  --shadow-elevated: var(--shadow-raised);
  --dropdown-shadow: 0 4px 24px 0 rgb(0 0 0 / 5%);

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

  
}