/* stylelint-disable */
:root {
  --font-family-base: "Public Sans", sans-serif;
}
/* Theme scope */
[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;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.3125rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.8125rem;
  --font-size-4xl: 2.125rem;
  --font-size-5xl: 2.5rem;
/** line-height: calc(var(--font-size-xl) + 6px); **/
  --line-height-xs: 1.125rem;
  --line-height-sm: 1.25rem;
  --line-height-md: 1.375rem;
  --line-height-lg: 1.5rem;
  --line-height-xl: 1.6875rem;
  --line-height-2xl: 1.875rem;
  --line-height-3xl: 2.1875rem;
  --line-height-4xl: 2.5rem;
  --line-height-5xl: 2.875rem;

  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-chip: var(--radius-md);
  --radius-button: var(--radius-md);
  --radius-tag: 0 var(--radius-md) 0 var(--radius-md);

  --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);

  --status-success: #007A1E;
  --status-success-bg: rgba(0, 122, 30, 0.1);
  --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.1);

  /* === BRAND TOKENS (Foundation Layer) === */
  --brand-primary-blue: #255989;
  --brand-primary-blue-hover: #255989;
  --brand-primary-gradient-start: #15334F;
  --brand-primary-gradient-end: #255989;
  --brand-primary-blue-10: rgba(37, 89, 137, 0.1);
  --brand-info-10: rgba(1, 117, 175, 0.1);
  

  --brand-accent-bright-orange: #F7941D;
  --brand-accent-orange: #F26522;

  --brand-neutral-blue-grey: #15334F;
  --brand-neutral-light-grey: #F2F2F2;
  --brand-neutral-cool-white: #F7FDFF;
  --brand-neutral-white: #FFFFFF;
  --brand-neutral-black: #000000;
  --brand-neutral-gray: #767676;
  --brand-neutral-olive-gray: #36403E;
  --brand-neutral-gray-10: rgba(118, 118, 118, 0.1);

  /* === SEMANTIC TOKENS (Application Layer) === */
  
  /* Text Colors */
  --color-text-primary: var(--brand-neutral-black);
  --color-text-secondary: var(--brand-neutral-blue-grey);
  --color-text-muted: var(--brand-neutral-gray);
  --color-text-inverse: var(--brand-neutral-white);
  --color-text-accent: var(--brand-neutral-olive-gray);
  --color-link: var(--brand-primary-blue);
  --color-link-hover: var(--brand-primary-blue-hover);
  --color-accent: var(--brand-accent-orange);

  /* Background Colors */
  --bg-page: var(--brand-neutral-white);
  --bg-surface: var(--brand-neutral-white);
  --bg-surface-subtle: var(--brand-neutral-cool-white);
  --bg-primary: var(--brand-primary-blue);
  --bg-primary-subtle: var(--brand-primary-blue-10);
  --bg-info-subtle: var(--brand-info-10);
  --bg-disabled-subtle: var(--brand-neutral-gray-10);
  --bg-header: var(--brand-neutral-blue-grey);
  --bg-footer: var(--brand-neutral-blue-grey);
  --bg-accent: var(--brand-accent-orange);
  --bg-muted: var(--brand-neutral-light-grey);
  --bg-dark: var(--brand-neutral-olive-gray);
  --bg-inverse: var(--brand-neutral-black);

  /* Border Colors */
  --border-default: var(--brand-neutral-gray);
  --border-strong: var(--brand-primary-blue);
  --border-disabled: var(--brand-neutral-gray);
  --border-focus: var(--brand-primary-blue);
  --border-subtle: var(--brand-neutral-light-grey);
  --border-accent: var(--brand-accent-orange);
  --border-inverse: var(--brand-neutral-white);

  /* Action/Interactive States */
  --action-primary-bg: linear-gradient(
    90deg,
    var(--brand-primary-gradient-start) 0%,
    var(--brand-primary-gradient-end) 100%
  );
  --action-primary-bg-hover: var(--brand-primary-blue-hover);
  --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-cool-white);
  --action-secondary-text: var(--brand-primary-blue);
  --action-secondary-border: var(--brand-primary-blue);

  --action-tertiary-bg: transparent;
  --action-tertiary-bg-hover: var(--brand-neutral-cool-white);
  --action-tertiary-text: var(--brand-primary-blue);

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

  /* Component-Specific Tokens */
  --chip-default-bg: var(--brand-neutral-light-grey);
  --chip-default-text: var(--brand-neutral-blue-grey);

  --tag-success-bg: var(--status-success-bg);
  --tag-success-text: var(--status-success);
  --tag-warning-bg: var(--status-warning-bg);
  --tag-warning-text: var(--status-warning);
  --tag-error-bg: var(--status-error-bg);
  --tag-error-text: var(--status-error);

  --shadow-default: var(--shadow-rest);
  --shadow-elevated: var(--shadow-raised);

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