/* Light UI tokens mapped to Microsoft Fluent 2 Design Tokens. */
:root,
html[data-theme="default"],
html[data-theme=""],
html:not([data-theme]) {
  color-scheme: light;

  /* Aliases to Fluent 2 Tokens */
  --bg: var(--colorNeutralBackground2);
  --bg-secondary: var(--colorNeutralBackground3);
  --surface: var(--colorNeutralBackground1);
  --surface-elevated: var(--colorNeutralBackground1);
  --card: var(--colorNeutralBackground1);
  --border: var(--colorNeutralStroke1);
  --divider: var(--colorNeutralStrokeSubtle);

  --text-primary: var(--colorNeutralForeground1);
  --text-secondary: var(--colorNeutralForeground2);
  --text-disabled: var(--colorNeutralForegroundDisabled);

  --primary: var(--colorBrandBackground);
  --primary-hover: var(--colorBrandBackgroundHover);
  --primary-active: var(--colorBrandBackgroundPressed);

  --success: var(--colorStatusSuccessForeground1);
  --warning: var(--colorStatusWarningForeground1);
  --danger: var(--colorStatusDangerForeground1);
  --info: var(--colorStatusInfoForeground1);

  --shadow-sm: var(--shadow2);
  --shadow-md: var(--shadow4);
  --shadow-lg: var(--shadow16);

  --radius-sm: var(--borderRadiusSmall);
  --radius-md: var(--borderRadiusMedium);
  --radius-lg: var(--borderRadiusLarge);

  --app-primary: var(--colorBrandBackground);
  --app-primary-hover: var(--colorBrandBackgroundHover);
  --app-primary-active: var(--colorBrandBackgroundPressed);
  --app-primary-light: var(--colorBrandBackground2);
  --app-primary-lighter: var(--colorBrandBackground2);
  --app-primary-soft: var(--colorBrandBackground2);
  --app-primary-subtle: var(--colorBrandBackground2);
  --app-primary-text: var(--colorNeutralForegroundOnBrand);

  --app-success: var(--colorStatusSuccessForeground1);
  --app-success-light: var(--colorStatusSuccessBackground1);
  --app-success-soft: var(--colorStatusSuccessBackground1);
  --app-success-text: var(--colorStatusSuccessForeground2);

  --app-warning: var(--colorStatusWarningForeground1);
  --app-warning-light: var(--colorStatusWarningBackground1);
  --app-warning-soft: var(--colorStatusWarningBackground1);
  --app-warning-text: var(--colorStatusWarningForeground2);

  --app-danger: var(--colorStatusDangerForeground1);
  --app-danger-light: var(--colorStatusDangerBackground1);
  --app-danger-soft: var(--colorStatusDangerBackground1);
  --app-danger-text: var(--colorStatusDangerForeground2);

  --app-info: var(--colorStatusInfoForeground1);
  --app-info-light: var(--colorStatusInfoBackground1);
  --app-info-soft: var(--colorStatusInfoBackground1);
  --app-info-text: var(--colorStatusInfoForeground1);

  --app-text: var(--colorNeutralForeground1);
  --app-text-secondary: var(--colorNeutralForeground2);
  --app-text-tertiary: var(--colorNeutralForeground3);
  --app-muted: var(--colorNeutralForeground3);

  --app-bg: var(--colorNeutralBackground2);
  --app-surface: var(--colorNeutralBackground1);
  --app-surface-raised: var(--colorNeutralBackground1);
  --app-surface-soft: var(--colorNeutralBackground2);
  --app-surface-hover: var(--colorNeutralBackgroundSubtleHover);
  --app-surface-active: var(--colorNeutralBackgroundSubtlePressed);

  --app-control-bg: var(--colorNeutralBackground1);
  --app-control-hover: var(--colorNeutralBackground1Hover);

  --app-border: var(--colorNeutralStroke1);
  --app-border-light: var(--colorNeutralStrokeSubtle);
  --app-border-soft: var(--colorNeutralStrokeSubtle);
  --app-border-focus: var(--colorBrandStroke1);
  --app-focus-ring: var(--colorFocusRingOuter);

  --app-shadow-xs: var(--shadow2);
  --app-shadow-sm: var(--shadow2);
  --app-shadow-md: var(--shadow4);
  --app-shadow-lg: var(--shadow16);
  --app-shadow-xl: var(--shadow28);
  --app-shadow-strong: var(--shadow28);
  --app-shadow: var(--shadow2);

  --app-radius-xs: var(--borderRadiusSmall);
  --app-radius-sm: var(--borderRadiusMedium);
  --app-radius-md: var(--borderRadiusMedium);
  --app-radius-lg: var(--borderRadiusLarge);
  --app-radius-xl: var(--borderRadiusXLarge);
  --app-radius-2xl: var(--borderRadiusXLarge);
  --app-radius-full: var(--borderRadiusCircular);

  --app-space-0: var(--spacingNone);
  --app-space-1: var(--spacingS);
  --app-space-2: var(--spacingL);
  --app-space-3: var(--spacingXXL);
  --app-space-4: var(--spacingXXXL);
  --app-space-5: 40px;
  --app-space-6: 48px;
  --app-space-7: 56px;
  --app-space-8: 64px;

  --app-font-family: var(--fontFamilyBase);
  --app-font-size-xs: var(--fontSize200);
  --app-font-size-sm: var(--fontSize200);
  --app-font-size-base: var(--fontSize300);
  --app-font-size-md: var(--fontSize400);
  --app-font-size-lg: var(--fontSize500);
  --app-font-size-xl: var(--fontSize600);
  --app-font-size-2xl: var(--fontSize700);

  --app-font-weight-normal: var(--fontWeightRegular);
  --app-font-weight-medium: var(--fontWeightMedium);
  --app-font-weight-semibold: var(--fontWeightSemibold);
  --app-font-weight-bold: var(--fontWeightBold);
  --app-font-weight-extrabold: 800;

  --app-input-height: 32px;
  --app-input-height-lg: 40px;
  --app-button-height-sm: 24px;
  --app-button-height: 32px;
  --app-button-height-lg: 40px;

  --app-icon-size-xs: var(--fontSize200);
  --app-icon-size-sm: var(--fontSize400);
  --app-icon-size: var(--fontSize500);
  --app-icon-size-md: var(--fontSize500);
  --app-icon-size-lg: var(--fontSize600);
  --app-icon-size-xl: 32px;

  --app-header-height: 48px;
  --app-sidebar-width: 256px;
  --app-sidebar-collapsed-width: 64px;

  --app-z-base: var(--zIndexBase);
  --app-z-dropdown: var(--zIndexDropdown);
  --app-z-sticky: var(--zIndexSticky);
  --app-z-fixed: 1030;
  --app-z-modal-backdrop: var(--zIndexModalBackdrop);
  --app-z-modal: var(--zIndexModal);
  --app-z-popover: var(--zIndexPopover);
  --app-z-tooltip: var(--zIndexTooltip);
  --app-z-toast: var(--zIndexToast);

  --app-transition-fast: var(--durationFast);
  --app-transition-base: var(--durationNormal);
  --app-transition-slow: var(--durationSlow);

  --app-ease: var(--curveFluent);
  --app-ease-in: var(--curveAccelerateMax);
  --app-ease-out: var(--curveDecelerateMax);
  --app-ease-in-out: var(--curveEasyEase);
  --app-backdrop-filter: none;
}

html:not([data-theme="dark"]):not([data-theme="glass"]) body {
  background: linear-gradient(180deg, var(--colorNeutralBackground1) 0%, var(--colorNeutralBackground2) 100%);
}