// src/components/00-foundations/colours/_semantic_colours.scss

@mixin semanticColoursCssVariables {
  // Text colours
  --ds-textColor-default: var(--ds-palette-black-95);
  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
  --ds-textColor-secondary: var(--ds-palette-black-70);
  --ds-textColor-white: var(--ds-palette-white);
  --ds-textColor-danger: var(--ds-palette-red-70);
  --ds-textColor-success: var(--ds-palette-green-70);
  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
  --ds-textColor-link: var(--ds-palette-mainBlue-70);
  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
  --ds-textColor-link-visited: #551a8b; // According to W3C standards, this is the visited link color
  --ds-textColor-link-standalone: var(--ds-palette-black-70);
  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
  --ds-textColor-info: var(--ds-palette-blue-70);
  --ds-textColor-attention: var(--ds-palette-yellow-70);

  // Background colours
  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
  --ds-bgColor-secondary: var(--ds-overlay-black-00);
  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
  --ds-bgColor-white: var(--ds-palette-white);
  --ds-bgColor-white-hover: var(--ds-palette-black-05);
  --ds-bgColor-white-active: var(--ds-palette-black-10);
  --ds-bgColor-black: var(--ds-palette-black-95);
  --ds-bgColor-black-hover: var(--ds-palette-black-80);
  --ds-bgColor-black-active: var(--ds-palette-black-70);
  --ds-bgColor-danger: var(--ds-palette-red-05);
  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
  --ds-bgColor-danger-active: var(--ds-palette-red-20);
  --ds-bgColor-success: var(--ds-palette-green-05);
  --ds-bgColor-success-hover: var(--ds-palette-green-10);
  --ds-bgColor-success-active: var(--ds-palette-green-20);
  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-05);
  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-10);
  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-15);
  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-30);
  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
  --ds-bgColor-info: var(--ds-palette-blue-05);
  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
  --ds-bgColor-info-active: var(--ds-palette-blue-20);
  --ds-bgColor-neutral: var(--ds-palette-black-05);
  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
  --ds-bgColor-attention: var(--ds-palette-yellow-05);
  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
  --ds-bgColor-neutral-bold: var(--ds-palette-black-60);
  --ds-bgColor-neutral-bold-hover: var(--ds-palette-black-70);
  --ds-bgColor-neutral-bold-active: var(--ds-palette-black-80);
  --ds-bgColor-info-bold: var(--ds-palette-blue-60);
  --ds-bgColor-info-bold-hover: var(--ds-palette-blue-70);
  --ds-bgColor-info-bold-active: var(--ds-palette-blue-80);
  --ds-bgColor-attention-bold: var(--ds-palette-yellow-40);
  --ds-bgColor-attention-bold-hover: var(--ds-palette-yellow-50);
  --ds-bgColor-attention-bold-active: var(--ds-palette-yellow-60);
  --ds-bgColor-danger-bold: var(--ds-palette-red-60);
  --ds-bgColor-danger-bold-hover: var(--ds-palette-red-70);
  --ds-bgColor-danger-bold-active: var(--ds-palette-red-80);
  --ds-bgColor-success-bold: var(--ds-palette-green-60);
  --ds-bgColor-success-bold-hover: var(--ds-palette-green-70);
  --ds-bgColor-success-bold-active: var(--ds-palette-green-80);
  --ds-bgColor-backdrop: var(--ds-overlay-black-50);

  // Border colours
  --ds-borderColor-default: var(--ds-palette-black-50);
  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
  --ds-borderColor-black: var(--ds-palette-black-95);
  --ds-borderColor-white: var(--ds-palette-white);
  --ds-borderColor-danger: var(--ds-palette-red-60);
  --ds-borderColor-success: var(--ds-palette-green-60);
  --ds-borderColor-transparent: var(--ds-overlay-black-00);
  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
  --ds-borderColor-light: var(--ds-palette-black-20);
  --ds-borderColor-info: var(--ds-palette-blue-60);
  --ds-borderColor-attention: var(--ds-palette-yellow-60);

  // Icon colours
  --ds-iconColor-default: var(--ds-palette-black-95);
  --ds-iconColor-default-hover: var(--ds-palette-black-80);
  --ds-iconColor-default-active: var(--ds-palette-black-70);
  --ds-iconColor-neutral: var(--ds-palette-black-50);
  --ds-iconColor-neutral-hover: var(--ds-palette-black-60);
  --ds-iconColor-neutral-active: var(--ds-palette-black-70);
  --ds-iconColor-white: var(--ds-palette-white);
  --ds-iconColor-white-hover: var(--ds-palette-black-05);
  --ds-iconColor-white-active: var(--ds-palette-black-10);
  --ds-iconColor-primary: var(--ds-palette-mainBlue-70);
  --ds-iconColor-primary-active: var(--ds-palette-mainBlue-80);
  --ds-iconColor-primary-hover: var(--ds-palette-mainBlue-90);
  --ds-iconColor-info: var(--ds-palette-blue-60);
  --ds-iconColor-info-hover: var(--ds-palette-blue-70);
  --ds-iconColor-info-active: var(--ds-palette-blue-80);
  --ds-iconColor-danger: var(--ds-palette-red-60);
  --ds-iconColor-danger-hover: var(--ds-palette-red-70);
  --ds-iconColor-danger-active: var(--ds-palette-red-80);
  --ds-iconColor-success: var(--ds-palette-green-60);
  --ds-iconColor-success-hover: var(--ds-palette-green-70);
  --ds-iconColor-success-active: var(--ds-palette-green-80);
  --ds-iconColor-attention: var(--ds-palette-yellow-60);
  --ds-iconColor-attention-hover: var(--ds-palette-yellow-70);
  --ds-iconColor-attention-active: var(--ds-palette-yellow-80);
  --ds-iconColor-disabled-onLight: var(--ds-palette-black-40);
  --ds-iconColor-disabled-onDark: var(--ds-overlay-white-40);
}

// Legacy mixin for backwards compatibility
@mixin semanticColours {
  :root,
  :host {
    @include semanticColoursCssVariables;
  }
}

// Text colours
$dsTextColorDefault: var(--ds-textColor-default);
$dsTextColorPrimary: var(--ds-textColor-primary);
$dsTextColorSecondary: var(--ds-textColor-secondary);
$dsTextColorWhite: var(--ds-textColor-white);
$dsTextColorDanger: var(--ds-textColor-danger);
$dsTextColorSuccess: var(--ds-textColor-success);
$dsTextColorDisabledOnLight: var(--ds-textColor-disabled-onLight);
$dsTextColorDisabledOnDark: var(--ds-textColor-disabled-onDark);
$dsTextColorLink: var(--ds-textColor-link);
$dsTextColorLinkHover: var(--ds-textColor-link-hover);
$dsTextColorLinkActive: var(--ds-textColor-link-active);
$dsTextColorLinkVisited: var(--ds-textColor-link-visited);
$dsTextColorLinkStandalone: var(--ds-textColor-link-standalone);
$dsTextColorLinkStandaloneHover: var(--ds-textColor-link-standalone-hover);
$dsTextColorLinkStandaloneActive: var(--ds-textColor-link-standalone-active);
$dsTextColorLinkStandaloneFocus: var(--ds-textColor-link-standalone-focus);
$dsTextColorInfo: var(--ds-textColor-info);
$dsTextColorAttention: var(--ds-textColor-attention);

// Background colours
$dsBgColorPrimary: var(--ds-bgColor-primary);
$dsBgColorPrimaryHover: var(--ds-bgColor-primary-hover);
$dsBgColorPrimaryActive: var(--ds-bgColor-primary-active);
$dsBgColorSecondary: var(--ds-bgColor-secondary);
$dsBgColorSecondaryHover: var(--ds-bgColor-secondary-hover);
$dsBgColorSecondaryActive: var(--ds-bgColor-secondary-active);
$dsBgColorWhite: var(--ds-bgColor-white);
$dsBgColorWhiteHover: var(--ds-bgColor-white-hover);
$dsBgColorWhiteActive: var(--ds-bgColor-white-active);
$dsBgColorBlack: var(--ds-bgColor-black);
$dsBgColorBlackHover: var(--ds-bgColor-black-hover);
$dsBgColorBlackActive: var(--ds-bgColor-black-active);
$dsBgColorDanger: var(--ds-bgColor-danger);
$dsBgColorDangerHover: var(--ds-bgColor-danger-hover);
$dsBgColorDangerActive: var(--ds-bgColor-danger-active);
$dsBgColorSuccess: var(--ds-bgColor-success);
$dsBgColorSuccessHover: var(--ds-bgColor-success-hover);
$dsBgColorSuccessActive: var(--ds-bgColor-success-active);
$dsBgColorTransparentOnLight: var(--ds-bgColor-transparent-onLight);
$dsBgColorTransparentOnLightHover: var(--ds-bgColor-transparent-onLight-hover);
$dsBgColorTransparentOnLightActive: var(--ds-bgColor-transparent-onLight-active);
$dsBgColorTransparentOnDark: var(--ds-bgColor-transparent-onDark);
$dsBgColorTransparentOnDarkHover: var(--ds-bgColor-transparent-onDark-hover);
$dsBgColorTransparentOnDarkActive: var(--ds-bgColor-transparent-onDark-active);
$dsBgColorDisabledOnLight: var(--ds-bgColor-disabled-onLight);
$dsBgColorDisabledOnDark: var(--ds-bgColor-disabled-onDark);
$dsBgColorInfo: var(--ds-bgColor-info);
$dsBgColorInfoHover: var(--ds-bgColor-info-hover);
$dsBgColorInfoActive: var(--ds-bgColor-info-active);
$dsBgColorNeutral: var(--ds-bgColor-neutral);
$dsBgColorNeutralHover: var(--ds-bgColor-neutral-hover);
$dsBgColorNeutralActive: var(--ds-bgColor-neutral-active);
$dsBgColorNeutralLight: var(--ds-bgColor-neutralLight);
$dsBgColorNeutralLightHover: var(--ds-bgColor-neutralLight-hover);
$dsBgColorNeutralLightActive: var(--ds-bgColor-neutralLight-active);
$dsBgColorAttention: var(--ds-bgColor-attention);
$dsBgColorAttentionHover: var(--ds-bgColor-attention-hover);
$dsBgColorAttentionActive: var(--ds-bgColor-attention-active);
$dsBgColorNeutralBold: var(--ds-bgColor-neutral-bold);
$dsBgColorNeutralBoldHover: var(--ds-bgColor-neutral-bold-hover);
$dsBgColorNeutralBoldActive: var(--ds-bgColor-neutral-bold-active);
$dsBgColorInfoBold: var(--ds-bgColor-info-bold);
$dsBgColorInfoBoldHover: var(--ds-bgColor-info-bold-hover);
$dsBgColorInfoBoldActive: var(--ds-bgColor-info-bold-active);
$dsBgColorAttentionBold: var(--ds-bgColor-attention-bold);
$dsBgColorAttentionBoldHover: var(--ds-bgColor-attention-bold-hover);
$dsBgColorAttentionBoldActive: var(--ds-bgColor-attention-bold-active);
$dsBgColorDangerBold: var(--ds-bgColor-danger-bold);
$dsBgColorDangerBoldHover: var(--ds-bgColor-danger-bold-hover);
$dsBgColorDangerBoldActive: var(--ds-bgColor-danger-bold-active);
$dsBgColorSuccessBold: var(--ds-bgColor-success-bold);
$dsBgColorSuccessBoldHover: var(--ds-bgColor-success-bold-hover);
$dsBgColorSuccessBoldActive: var(--ds-bgColor-success-bold-active);
$dsBgColorBackdrop: var(--ds-bgColor-backdrop);

// Border colours
$dsBorderColorDefault: var(--ds-borderColor-default);
$dsBorderColorPrimary: var(--ds-borderColor-primary);
$dsBorderColorBlack: var(--ds-borderColor-black);
$dsBorderColorWhite: var(--ds-borderColor-white);
$dsBorderColorDanger: var(--ds-borderColor-danger);
$dsBorderColorSuccess: var(--ds-borderColor-success);
$dsBorderColorTransparent: var(--ds-borderColor-transparent);
$dsBorderColorDisabledOnLight: var(--ds-borderColor-disabled-onLight);
$dsBorderColorDisabledOnDark: var(--ds-borderColor-disabled-onDark);
$dsBorderColorLight: var(--ds-borderColor-light);
$dsBorderColorInfo: var(--ds-borderColor-info);
$dsBorderColorAttention: var(--ds-borderColor-attention);

// Icon colours
$dsIconColorDefault: var(--ds-iconColor-default);
$dsIconColorDefaultHover: var(--ds-iconColor-default-hover);
$dsIconColorDefaultActive: var(--ds-iconColor-default-active);
$dsIconColorNeutral: var(--ds-iconColor-neutral);
$dsIconColorNeutralHover: var(--ds-iconColor-neutral-hover);
$dsIconColorNeutralActive: var(--ds-iconColor-neutral-active);
$dsIconColorWhite: var(--ds-iconColor-white);
$dsIconColorWhiteHover: var(--ds-iconColor-white-hover);
$dsIconColorWhiteActive: var(--ds-iconColor-white-active);
$dsIconColorPrimary: var(--ds-iconColor-primary);
$dsIconColorPrimaryActive: var(--ds-iconColor-primary-active);
$dsIconColorPrimaryHover: var(--ds-iconColor-primary-hover);
$dsIconColorInfo: var(--ds-iconColor-info);
$dsIconColorInfoHover: var(--ds-iconColor-info-hover);
$dsIconColorInfoActive: var(--ds-iconColor-info-active);
$dsIconColorDanger: var(--ds-iconColor-danger);
$dsIconColorDangerHover: var(--ds-iconColor-danger-hover);
$dsIconColorDangerActive: var(--ds-iconColor-danger-active);
$dsIconColorSuccess: var(--ds-iconColor-success);
$dsIconColorAttention: var(--ds-iconColor-attention);
$dsIconColorSuccessHover: var(--ds-iconColor-success-hover);
$dsIconColorSuccessActive: var(--ds-iconColor-success-active);
$dsIconColorDisabledOnLight: var(--ds-iconColor-disabled-onLight);
$dsIconColorDisabledOnDark: var(--ds-iconColor-disabled-onDark);