:root {
  /* Error */
	--color-base-error: #D92D20;
	--color-base-error-900: #7A271A;
	--color-base-error-800: #912018;
	--color-base-error-700: #B32318;
	--color-base-error-600: #D92D20;
	--color-base-error-500: #F04438;
	--color-base-error-400: #F97066;
	--color-base-error-300: #FDA19B;
	--color-base-error-200: #FECDC9;
	--color-base-error-100: #FEE4E2;
	--color-base-error-50: #FEF3F2;

	/* Warning */
	--color-base-warning: #FFC107;
	--color-base-warning-900: #FF6F00;
	--color-base-warning-800: #FF8F00;
	--color-base-warning-700: #FFA000;
	--color-base-warning-600: #FFB300;
	--color-base-warning-500: #FFC107;
	--color-base-warning-400: #FFCA28;
	--color-base-warning-300: #FFD54F;
	--color-base-warning-200: #FFE082;
	--color-base-warning-100: #FFECB3;
	--color-base-warning-50: #FFF8E1;

    /* Text Colors */
  --color-text-primary: var(--color-base-primary-900);
  --color-text-secondary: var(--color-base-neutral-800);
  --color-text-tertiary: var(--color-base-neutral-500);
  --color-text-disable: var(--color-base-neutral-400);
  --color-text-link: var(--color-base-secondary-700);
  --color-text-link-hover: var(--color-base-secondary-900);
  --color-text-accent: var(--color-base-secondary-700);
  --color-text-inverse: var(--color-base-neutral-50);
  --color-text-error: var(--color-base-error-700);

  /* Icon Colors */
  --color-icon-primary: var(--color-base-primary-900);
  --color-icon-secondary: var(--color-base-neutral-600);
  --color-icon-tertiary: var(--color-base-neutral-500);
  --color-icon-disable: var(--color-base-neutral-400);
  --color-icon-link: var(--color-base-secondary-700);
  --color-icon-inverse: var(--color-base-neutral-50);
  --color-icon-error: var(--color-base-error-700);

  /* --- Surface: Main --- */
  --color-bg-main: var(--color-base-neutral-50);
  --color-bg-main-secondary: var(--color-base-neutral-100);
  --color-bg-main-tertiary: var(--color-base-neutral-300);
  --color-bg-main-disable: var(--color-base-neutral-200);

  /* --- Surface: Primary --- */
  --color-bg-primary: var(--color-base-primary-900);
  --color-bg-primary-light: var(--color-base-primary-700);
  --color-bg-primary-lighter: var(--color-base-primary-500);

  /* --- Surface: Secondary --- */
  --color-bg-secondary: var(--color-base-secondary-300);
  --color-bg-secondary-light: var(--color-base-secondary-200);
  --color-bg-secondary-lighter: var(--color-base-secondary-100);

  /* --- Surface: Error --- */
  --color-bg-error: var(--color-base-error-600);
  --color-bg-error-light: var(--color-base-error-500);
  --color-bg-error-lighter: var(--color-base-error-50);

  /* --- Surface: Warning --- */
  --color-bg-warning: var(--color-base-warning-600);
  --color-bg-warning-light: var(--color-base-warning-500);
  --color-bg-warning-lighter: var(--color-base-warning-50);

  /* --- Border Colors --- */
  --color-border-neutral: var(--color-base-neutral-300);
  --color-border-neutral-secondary: var(--color-base-neutral-400);
  --color-border-primary: var(--color-base-primary-700);
  --color-border-secondary: var(--color-base-secondary-400);
  --color-border-error: var(--color-base-error-200);
  --color-border-warning: var(--color-base-warning-400);

  /* --- Color Calendar --- */
  --color-calendar-date-start-end-bg: var(--color-base-secondary);
  --color-calendar-date-bg-track: var(--color-base-secondary-100);
  --color-calendar-date-hover: var(--color-base-secondary-300);

  /* checkbox & radio */
  --color-ckeckbox-bg: var(--color-base-secondary-600);
  --color-checkbox-icon: var(--color-icon-inverse);

  /* --- Border Radius --- */
  --border-radius-xs: 8px;
  --border-radius-sm: 12px;
  --border-radius-md: 16px;
  --border-radius-lg: 20px;
  --border-radius-xl: 24px;

  /* --- Border Width --- */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

    /* --- Size Control --- */
  --size-control-xxs: 20px;
  --size-control-xs: 24px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-control-xl: 56px;

  /* --- Padding X (horizontal) --- */
  --padding-x-xxs: 4px;
  --padding-x-xs: 8px;
  --padding-x-sm: 12px;
  --padding-x-md: 16px;
  --padding-x-lg: 24px;
  --padding-x-xl: 32px;

  /* --- Padding Y (vertical) --- */
  --padding-y-xxs: 4px;
  --padding-y-xs: 8px;
  --padding-y-sm: 12px;
  --padding-y-md: 16px;
  --padding-y-lg: 24px;
  --padding-y-xl: 32px;

  /* --- Spacing (general) --- */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* --- Elevation: High --- */
  --elevation-high-horizontal: 0;
  --elevation-high-vertical: 2px;
  --elevation-high-blur: 3px;
  --elevation-high-spread: 0;
  --elevation-high-color: rgba(6, 52, 61, 0.20);

  /* --- Elevation: Higher (Shadow 1) --- */
  --elevation-higher-1-horizontal: 0;
  --elevation-higher-1-vertical: 8px;
  --elevation-higher-1-blur: 8px;
  --elevation-higher-1-spread: 3px;
  --elevation-higher-1-color: rgba(6, 52, 61, 0.10);

  /* --- Elevation: Higher (Shadow 2) --- */
  --elevation-higher-2-horizontal: 0;
  --elevation-higher-2-vertical: 4px;
  --elevation-higher-2-blur: 3px;
  --elevation-higher-2-spread: 0;
  --elevation-higher-2-color: rgba(6, 52, 61, 0.15);

  /* --- Elevation: Highest (Shadow 1) --- */
  --elevation-highest-1-horizontal: 0;
  --elevation-highest-1-vertical: 12px;
  --elevation-highest-1-blur: 12px;
  --elevation-highest-1-spread: 6px;
  --elevation-highest-1-color: rgba(6, 52, 61, 0.10);

  /* --- Elevation: Highest (Shadow 2) --- */
  --elevation-highest-2-horizontal: 0;
  --elevation-highest-2-vertical: 8px;
  --elevation-highest-2-blur: 4px;
  --elevation-highest-2-spread: 0;
  --elevation-highest-2-color: rgba(6, 52, 61, 0.20);

  /* --- Icon Sizes --- */
  --icon-size-xxs: 8px;
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --icon-size-xxl: 32px;

    /* --- Headlines: Desktop --- */
  --font-size-headline-desktop-sm: 1.5rem;
  --line-height-headline-desktop-sm: 1.3;
  --font-weight-headline-desktop-sm: 400;

  --font-size-headline-desktop-md: 2rem;
  --line-height-headline-desktop-md: 1.5;
  --font-weight-headline-desktop-md: 400;

  --font-size-headline-desktop-lg: 2.25rem;
  --line-height-headline-desktop-lg: 1.4;
  --font-weight-headline-desktop-lg: 400;

  --font-size-headline-desktop-xl: 3rem;
  --line-height-headline-desktop-xl: 1.3;
  --font-weight-headline-desktop-xl: 400;

  /* --- Headlines: Mobile --- */
  --font-size-headline-mobile-sm: 1.75rem;
  --line-height-headline-mobile-sm: 1.4;
  --font-weight-headline-mobile-sm: 400;

  --font-size-headline-mobile-md: 2rem;
  --line-height-headline-mobile-md: 1.5;
  --font-weight-headline-mobile-md: 400;

  --font-size-headline-mobile-lg: 2.25rem;
  --line-height-headline-mobile-lg: 1.4;
  --font-weight-headline-mobile-lg: 400;

  --font-size-headline-mobile-xl: 2.5rem;
  --line-height-headline-mobile-xl: 1.3;
  --font-weight-headline-mobile-xl: 400;

  /* --- Body --- */
  --font-size-body-xs: 0.75rem;
  --line-height-body-xs: 0.8;
  --font-weight-body-xs: 400;
  --letter-spacing-body-xs: 0.015em;

  --font-size-body-xs-emphasis: 0.75rem;
  --line-height-body-xs-emphasis: 0.8;
  --font-weight-body-xs-emphasis: 600;
  --letter-spacing-body-xs-emphasis: 0.015em;

  --font-size-body-sm: 0.875rem;
  --line-height-body-sm: 1;
  --font-weight-body-sm: 400;
  --letter-spacing-body-sm: 0.02em;

  --font-size-body-sm-emphasis: 0.875rem;
  --line-height-body-sm-emphasis: 1;
  --font-weight-body-sm-emphasis: 600;
  --letter-spacing-body-sm-emphasis: 0.02em;

  --font-size-body-md: 1rem;
  --line-height-body-md: 1.125;
  --font-weight-body-md: 400;
  --letter-spacing-body-md: 0.02em;

  --font-size-body-md-emphasis: 1rem;
  --line-height-body-md-emphasis: 1.125;
  --font-weight-body-md-emphasis: 600;
  --letter-spacing-body-md-emphasis: 0.02em;

  --font-size-body-lg: 1.25rem;
  --line-height-body-lg: 1.1;
  --font-weight-body-lg: 400;
  --letter-spacing-body-lg: 0.025em;

  --font-size-body-lg-emphasis: 1.25rem;
  --line-height-body-lg-emphasis: 1.1;
  --font-weight-body-lg-emphasis: 600;
  --letter-spacing-body-lg-emphasis: 0.025em;
}