/*============================================================================================================
//		©Copyright 2026 Infios US, Inc. All Rights Reserved. Reproduction and distribution under license only.
//		Körber is a trademark of Körber AG, Anckelmannsplatz 1, 20537 Hamburg, Germany.
//		All trademarks used are the property of their respective owners.
//============================================================================================================*/

/* Fonts: we store our fonts inside the Styles/vendors/infios directory */

:root,
:host {
  /* Infios TOKENS */

  /* Color */

  /* Background */
  --infios-color-bg: var(--infios-color-neutral1);
  --infios-color-bg-alt: var(--infios-color-neutral3);
  --infios-color-bg-surface: var(--infios-color-neutral1);
  --infios-color-bg-surface-secondary: var(--infios-color-neutral2);
  --infios-color-bg-surface-secondary-hover: var(--infios-color-neutral4);
  --infios-color-bg-surface-tertiary: var(--infios-color-neutral3);
  --infios-color-bg-surface-quaternary: var(--infios-color-neutral6);
  --infios-color-bg-surface-overlay: var(--infios-color-neutral2);
  --infios-color-bg-fill: var(--infios-color-acce2);
  --infios-color-bg-fill-avatar: var(--infios-color-neutral5);
  --infios-color-bg-fill-hover: var(--infios-color-acce2h);
  --infios-color-bg-fill-pressed: var(--infios-color-acce2a);
  --infios-color-bg-fill-disabled: var(--infios-color-neutral4);
  --infios-color-bg-fill-disabled-acce: var(--infios-color-neutral5);
  --infios-color-bg-fill-readonly: var(--infios-color-neutral2);
  --infios-color-bg-fill-secondary: var(--infios-color-neutral1);
  --infios-color-bg-fill-secondary-hover: var(--infios-color-neutral4);
  --infios-color-bg-fill-secondary-pressed: var(--infios-color-neutral3);
  --infios-color-bg-fill-tertiary: var(--infios-color-neutral6);
  --infios-color-bg-fill-tertiary-hover: var(--infios-color-neutral4);
  --infios-color-bg-fill-quaternary: var(--infios-color-neutral2);
  --infios-color-bg-fill-warning: var(--infios-color-sema1);
  --infios-color-bg-fill-warning-secondary: var(--infios-color-sema4);
  --infios-color-bg-fill-error: var(--infios-color-sema2);
  --infios-color-bg-fill-error-hover: var(--infios-color-sema2h);
  --infios-color-bg-fill-error-pressed: var(--infios-color-sema2a);
  --infios-color-bg-fill-success: var(--infios-color-sema3);
  --infios-color-bg-fill-special: var(--infios-color-sema5);
  --infios-color-bg-fill-info: var(--infios-color-sema6);
  --infios-color-bg-fill-alt: var(--infios-color-neutral7);
  --infios-color-bg-fill-support-1: var(--infios-color-supp1);
  --infios-color-bg-fill-support-2: var(--infios-color-supp2);
  --infios-color-bg-fill-support-3: var(--infios-color-supp3);
  --infios-color-bg-fill-support-4: var(--infios-color-supp4);
  --infios-color-bg-fill-support-5: var(--infios-color-supp5);
  --infios-color-bg-fill-support-6: var(--infios-color-supp6);
  --infios-color-bg-fill-support-7: var(--infios-color-supp7);
  --infios-color-bg-fill-support-8: var(--infios-color-supp8);
  --infios-color-bg-fill-support-9: var(--infios-color-supp9);
  --infios-color-bg-fill-support-10: var(--infios-color-supp10);
  --infios-color-bg-fill-field: var(--infios-color-neutral1);
  --infios-color-bg-fill-brand: var(--infios-color-acce1);
  --infios-color-bg-fill-brand-hover: var(--infios-color-neutral6);
  --infios-color-bg-fill-brand-pressed: var(--infios-color-neutral7);
  --infios-color-bg-fill-subtle: var(--infios-color-acce2s);

  /* Text */
  --infios-color-text: var(--infios-color-acce1);
  --infios-color-text-bg-fill: var(--infios-color-neutral1);
  --infios-color-text-primary: var(--infios-color-acce2);
  --infios-color-text-primary-hover: var(--infios-color-acce2h);
  --infios-color-text-secondary: var(--infios-color-neutral7);
  --infios-color-text-tertiary: var(--infios-color-neutral6);
  --infios-color-text-disabled: var(--infios-color-neutral5);
  --infios-color-text-error: var(--infios-color-sema2);
  --infios-color-text-link-disabled: var(--infios-color-neutral5);
  --infios-color-text-link: var(--infios-color-acce2);
  --infios-color-text-link-hover: var(--infios-color-acce2h);
  --infios-color-text-link-pressed: var(--infios-color-acce2a);
  --infios-color-text-info: var(--infios-color-sema6);
  --infios-color-text-success: var(--infios-color-sema3);
  --infios-color-text-warning: var(--infios-color-sema1);
  --infios-color-text-pressed: var(--infios-color-acce2a);
  --infios-color-text-error-hover: var(--infios-color-sema2h);
  --infios-color-text-error-pressed: var(--infios-color-sema2a);
  --infios-color-text-link-secondary: var(--infios-color-neutral1);
  --infios-color-text-link-visited: var(--infios-color-supp2);
  --infios-color-text-brand: var(--infios-color-brand);

  /* Border */
  --infios-color-border-active: var(--infios-color-neutral7);
  --infios-color-border-hover: var(--infios-color-acce2h);
  --infios-color-border-disabled: var(--infios-color-neutral5);
  --infios-color-border-secondary: var(--infios-color-neutral6);
  --infios-color-border-tertiary: var(--infios-color-neutral4);
  --infios-color-border-quaternary: var(--infios-color-neutral1);
  --infios-color-border-focus: var(--infios-color-acce2);
  --infios-color-border-error: var(--infios-color-sema2);
  --infios-color-border-error-hover: var(--infios-color-sema2h);
  --infios-color-border-info-hover: var(--infios-color-sema6-40);
  --infios-color-border-primary: var(--infios-color-acce2);
  --infios-color-border: var(--infios-color-acce1);
  --infios-color-border-success: var(--infios-color-sema3);
  --infios-color-border-info: var(--infios-color-sema6);
  --infios-color-border-warning: var(--infios-color-sema1);
  --infios-color-border-pressed: var(--infios-color-acce2a);
  --infios-color-border-quinary: var(--infios-color-neutral3);

  /* Icon */
  --infios-color-icon: var(--infios-color-acce1);
  --infios-color-icon-hover: var(--infios-color-acce2h);
  --infios-color-icon-pressed: var(--infios-color-acce2a);
  --infios-color-icon-primary: var(--infios-color-acce2);
  --infios-color-icon-secondary: var(--infios-color-neutral7);
  --infios-color-icon-tertiary: var(--infios-color-neutral6);
  --infios-color-icon-on-bg-fill: var(--infios-color-neutral1);
  --infios-color-icon-disabled: var(--infios-color-neutral5);
  --infios-color-icon-error: var(--infios-color-sema2);
  --infios-color-icon-warning: var(--infios-color-sema1);
  --infios-color-icon-success: var(--infios-color-sema3);
  --infios-color-icon-info: var(--infios-color-sema6);
  --infios-color-icon-error-hover: var(--infios-color-sema2h);
  --infios-color-icon-error-pressed: var(--infios-color-sema2a);
  --infios-color-icon-link-visited: var(--infios-color-supp2);
  --infios-color-icon-link-disabled: var(--infios-color-neutral5);
  --infios-color-icon-hover-secondary: var(--infios-color-neutral4);
  --infios-color-icon-brand: var(--infios-color-brand);

  /* Typography */

  /* Fonts */
  --infios-font-family-default: 'Noto Sans', sans-serif;
  --infios-font-family-code: 'Noto Mono', monospace;

  /* Font Size */
  --infios-text-font-size-sm: 12px;
  --infios-text-base-font-size: 14px;
  --infios-text-font-size-md: 16px;
  --infios-text-font-size-lg: 18px;
  --infios-text-font-size-xl: 20px;
  --infios-text-font-size-2xl: 24px;
  --infios-text-font-size-3xl: 28px;
  --infios-text-font-size-4xl: 32px;

  /* Font Weight*/
  --infios-font-weight-light: 300;
  --infios-font-weight-regular: 400;
  --infios-font-weight-bold: 700;
  --infios-font-weight-black: 900;

  /* Line Height */
  --infios-text-line-height-sm: 16px;
  --infios-text-base-line-height: 20px;
  --infios-text-line-height-md: 24px;
  --infios-text-line-height-lg: 24px;
  --infios-text-line-height-xl: 32px;
  --infios-text-line-height-2xl: 32px;
  --infios-text-line-height-3xl: 40px;
  --infios-text-line-height-4xl: 40px;

  /* Breakpoints - Pixel Values*/
  --infios-breakpoints-xs: 576px;
  --infios-breakpoints-sm: 576px;
  --infios-breakpoints-md: 786px;
  --infios-breakpoints-lg: 960px;
  --infios-breakpoints-xl: 1200px;
  --infios-breakpoints-2xl: 1400px;

  /* Container Query Breakpoints - Same values as media queries */
  --infios-container-sm: 295px;
  --infios-container-md: 296px;
  --infios-container-lg: 640px;

  /* Spacing */
  --infios-spacing-3xs: 4px;
  --infios-spacing-2xs: 8px;
  --infios-spacing-xs: 12px;
  --infios-spacing-s: 16px;
  --infios-spacing-m: 20px;
  --infios-spacing-l: 24px;
  --infios-spacing-xl: 28px;
  --infios-spacing-2xl: 32px;
  --infios-spacing-3xl: 40px;
  --infios-spacing-4xl: 48px;
  --infios-spacing-5xl: 64px;

  /* Shape */
  --infios-border-radius-sm: 2px;
  --infios-border-radius-md: 4px;
  --infios-border-radius-lg: 8px;
  --infios-border-radius-xl: 16px;
  --infios-border-radius-pill: 9999px;

  /* Shadow */
  --infios-shadow-header: 0 1px 2px rgba(35, 38, 37, 0.1);
  --infios-shadow-sidebar-left: 1px 0 2px rgba(35, 38, 37, 0.1);
  --infios-shadow-sidebar-right: -1px 0 2px rgba(35, 38, 37, 0.1);
  --infios-shadow-accordion-nested-edge: 0 0 1px rgba(0, 96, 255, 1);
  --infios-shadow-container: 0px 2px 8px 0px rgba(35, 38, 37, 0.15);
  --infios-shadow-list-item: 0px 2px 8px 0px rgba(35, 38, 37, 0.15);
  --infios-shadow-drawer: 0px 1px 2px 0px rgba(35, 38, 37, 0.1);
  --infios-shadow-bottom-sheet: 0px -3px 12px 0px rgba(35, 38, 37, 0.12);

  /* Components Height Size */
  --infios-height-size-compact: 32px;
  --infios-height-size-standard: 40px;
  --infios-height-size-comfortable: 48px;
  --infios-height-size-comfortable-xl: 56px;

  /* Transitions */
  --infios-transition-x-slow: 1000ms;
  --infios-transition-slow: 500ms;
  --infios-transition-medium: 250ms;
  --infios-transition-fast: 150ms;
  --infios-transition-x-fast: 50ms;

  /* Letter spacing */
  --infios-letter-spacing-normal: normal;

  /* Border width */
  --infios-border-width-sm: 1px;
  --infios-border-width-md: 2px;
  --infios-shape-border-divider: 1px;

  /* Border offset */
  --infios-border-offset: 2px;

  /* Clickable Sizes */
  --infios-clickable-size-standard: 24px;
  --infios-clickable-size-comfortable: 48px;

  /* Z-index */
  --infios-z-index-1: 0;
  /* Default */
  --infios-z-index-2: 10;
  /* Fab or same stack level */
  --infios-z-index-3: 100;
  /* Bottom sheet or same stack level */
  --infios-z-index-4: 150;
  /* Drawer or same stack level */
  --infios-z-index-5: 200;
  /* Dialog or same stack level */
  --infios-z-index-6: 300;
  /* Toast or same stack level */
}