interface Colors {
  primary: string;
  white: string;
  black: string;
  secondary: {
    default: string;
    dark: string;
  };
  tertiary: string;
  nudgebeeMain: string;
  success: string;
  error: string;
  errorHover: string;
  errorText: string;
  switchIconColor: string;
  iconColor: string;
  switchIcon: string;
  clusterIndicator: string;
  yellow: string;
  editIcon: string;
  highest: string;
  high: string;
  medium: string;
  low: string;
  lowest: string;
  lowestLight: string;
  NA: string;
  toDo: string;
  done: string;
  inProgress: string;
  open: string;
  critical: string;
  info: string;
  debug: string;
  ok: string;
  firing: string;
  purple: string;
  darkPrimary: string;
  text: {
    primary: string;
    secondary: string;
    white: string;
    black: string;
    secondaryDark: string;
    greyDark: string;
    tertiary: string;
    tertiaryLight: string;
    primaryDark: string;
    null: string;
    yellowLabel: string;
    orangeLabel: string;
    disabledInput: string;
    delete: string;
    red: string;
    checkBoxLabel: string;
    currency: string;
    primaryLight: string;
    divider: string;
    lastSync: string;
    currencyPrimaryDark: string;
    cpuLimit: string;
    cpuRecommendation: string;
    cpuRequested: string;
    cpuUsage: string;
    memoryLimit: string;
    memoryRecommendation: string;
    memoryRequested: string;
    memoryUsage: string;
    debug: string;
    pagination: string;
    lineChart: string;
    availability: string;
    numberComponent: string;
    green: string;
    traceRed: string;
    tracBlue: string;
    traceYellow: string;
    traceGreen: string;
    tracePurple: string;
    traceOrange: string;
    traceGray: string;
    traceCyan: string;
    traceDarkGray: string;
    traceOlive: string;
    traceGold: string;
    traceNavy: string;
    tracePink: string;
    traceBrown: string;
    traceLime: string;
    traceTeal: string;
    traceMagenta: string;
    darkGray: string;
    barChart: string;
    serviceMap: string;
    iosSlider: string;
    iosSliderDark: string;
    serviceMapGreen: string;
    serviceMapSkyblue: string;
    serviceMapBlue: string;
    title: string;
    low: string;
    sideBar: string;
    tertiarymedium: string;
    askNudgebeeWelcomeText: string;
    askNudgebeeUserName: string;
    nudgebeeResponse: string;
    nudgebeeSuggestionText: string;
    responseList: string;
    searchPlaceholder: string;
    purpleLabel: string;
    orangeLabelDark: string;
    mid: string;
    signinDark: string;
    dark: string;
    quaternary: string;
    disabled: string;
    tabGroupLabel: string;
    tabGroupArrow: string;
    warning: string;
    warningHover: string;
    infoDark: string;
    blueChip: string;
    greenChip: string;
    pastelPink: string;
  };
  shadow: {
    card: string;
    tab: string;
    softGray: string;
    softBlack: string;
  };
  background: {
    primary: string;
    secondary: string;
    tertiary: string;
    pastelPink: string;
    tertiaryLightest: string;
    tertiaryLightestest: string;
    tertiaryLightestestest: string;
    tertiarymedium: string;
    white: string;
    black: string;
    sideBar: string;
    secondaryDark: string;
    home: string;
    pages: string;
    askNudgebeePage: string;
    activeButtonColor: string;
    primaryLight: string;
    primaryLightest: string;
    errorLight: string;
    transparent: string;
    tableHeader: string;
    null: string;
    yellowLabel: string;
    criticalRed: string;
    tertiaryLight: string;
    blueLabel: string;
    greenLabel: string;
    lightRedLabel: string;
    input: string;
    error: string;
    intigrationCard: string;
    switchTrackDark: string;
    switchTrackLight: string;
    switchTrackLightest: string;
    switchThumb: string;
    accordionSummay: string;
    activeAnchorButton: string;
    activeTab: string;
    activeTabIndicator: string;
    anchorActiveTab: string;
    primaryDark: string;
    tabIndicator: string;
    summaryBlock: string;
    costBlock: string;
    totalRecomendation: string;
    red: string;
    recommendationChart: string;
    toggle: string;
    ticketDescription: string;
    buttonTab: string;
    infoGraphic: string;
    toggleIconBtn: string;
    toggleIconBtnHover: string;
    codeMirror: string;
    reactFlow: string;
    titleUnderline: string;
    medium: string;
    low: string;
    warning: string;
    lightBox: string;
    collapseableCardBG: string;
    conversationCardBG: string;
    selectedConversation: string;
    suggestionCardBG: string;
    suggestionCardHover: string;
    NubiQuestion: string;
    nubiHover: string;
    shimmerBase: string;
    shimmerHighlight: string;
    purpleLabel: string;
    orangeLabel: string;
    brandButton: string;
    brandButtonHover: string;
    tabPrimarySelected: string;
    warningLight: string;
    warningButton: string;
    warningButtonHover: string;
    warningLightest: string;
    blueChip: string;
    greenChip: string;
  };
  border: {
    primary: string;
    vertical: string;
    primaryLightest: string;
    primaryLight: string;
    errorLight: string;
    insightCard: string;
    secondary: string;
    success: string;
    secondaryLightest: string;
    secondaryLight: string;
    chipHover: string;
    error: string;
    white: string;
    logo: string;
    logolight: string;
    tertiary: string;
    quadrant: string;
    errorOutline: string;
    primaryDark: string;
    cpuLimit: string;
    cpuRecommendation: string;
    cpuRequested: string;
    cpuUsage: string;
    memoryLimit: string;
    memoryRecommendation: string;
    memoryRequested: string;
    memoryUsage: string;
    summaryBlock: string;
    ticketDescription: string;
    buttonTab: string;
    tertiaryLightest: string;
    paperOutline: string;
    queryAutocomplete: string;
    input: string;
    autocompleteOption: string;
    valueWithLeftBorder: string;
    conversationCard: string;
    nudgebeeSuggestion: string;
    nudgebeeSuggestionHover: string;
    warning: string;
    warningLight: string;
  };
  button: {
    primary: string;
    primaryHover: string;
    primaryDisabled: string;
    primaryDisabledText: string;
    primaryText: string;
    secondary: string;
    secondaryText: string;
    secondaryHover: string;
    secondaryBorder: string;
    secondaryHoverBorder: string;
    secondaryDisabled: string;
    secondaryDisabledText: string;
    secondaryDisabledBorder: string;
    tertiaryBorder: string;
    tertiary: string;
    tertiaryText: string;
    tertiaryHover: string;
    tertiaryHoverBorder: string;
    tertiaryDisabled: string;
    tertiaryDisabledText: string;
    tertiaryDisabledBorder: string;
  };
}

export const colors: Colors = {
  primary: 'var(--nb-color-primary)',
  white: 'var(--nb-color-white)',
  black: 'var(--nb-color-black)',
  secondary: {
    default: 'var(--nb-color-secondary-default)',
    dark: 'var(--nb-color-secondary-dark)',
  },
  tertiary: 'var(--nb-color-tertiary)',
  nudgebeeMain: 'var(--nb-color-nudgebee-main)',
  success: 'var(--nb-color-success)',
  error: 'var(--nb-color-error)',
  errorHover: 'var(--nb-color-error-hover)',
  errorText: 'var(--nb-color-error-text)',
  switchIconColor: 'var(--nb-color-switch-icon-color)',
  iconColor: 'var(--nb-color-icon-color)',
  switchIcon: 'var(--nb-color-switch-icon)',
  clusterIndicator: 'var(--nb-color-cluster-indicator)',
  yellow: 'var(--nb-color-yellow)',
  editIcon: 'var(--nb-color-edit-icon)',
  highest: 'var(--nb-color-highest)',
  high: 'var(--nb-color-high)',
  medium: 'var(--nb-color-medium)',
  low: 'var(--nb-color-low)',
  lowest: 'var(--nb-color-lowest)',
  lowestLight: 'var(--nb-color-lowest-light)',
  NA: 'var(--nb-color-na)',
  toDo: 'var(--nb-color-to-do)',
  done: 'var(--nb-color-done)',
  inProgress: 'var(--nb-color-in-progress)',
  open: 'var(--nb-color-open)',
  critical: 'var(--nb-color-critical)',
  info: 'var(--nb-color-info)',
  debug: 'var(--nb-color-debug)',
  ok: 'var(--nb-color-ok)',
  firing: 'var(--nb-color-firing)',
  purple: 'var(--nb-color-purple)',
  darkPrimary: 'var(--nb-color-dark-primary)',
  text: {
    primary: 'var(--nb-text-primary)',
    primaryDark: 'var(--nb-text-primary-dark)',
    secondary: 'var(--nb-text-secondary)',
    white: 'var(--nb-text-white)',
    black: 'var(--nb-text-black)',
    secondaryDark: 'var(--nb-text-muted)',
    greyDark: 'var(--nb-text-grey-dark)',
    tertiary: 'var(--nb-text-tertiary)',
    null: 'var(--nb-text-null)',
    yellowLabel: 'var(--nb-text-yellow-label)',
    orangeLabel: 'var(--nb-text-orange-label)',
    disabledInput: 'var(--nb-text-disabled-input)',
    delete: 'var(--nb-text-delete)',
    red: 'var(--nb-text-red)',
    checkBoxLabel: 'var(--nb-text-checkbox-label)',
    currency: 'var(--nb-text-currency)',
    primaryLight: 'var(--nb-text-primary-light)',
    divider: 'var(--nb-text-divider)',
    lastSync: 'var(--nb-text-last-sync)',
    currencyPrimaryDark: 'var(--nb-text-currency-primary-dark)',
    cpuLimit: 'var(--nb-text-cpu-limit)',
    cpuRecommendation: 'var(--nb-text-cpu-recommendation)',
    cpuRequested: 'var(--nb-text-cpu-requested)',
    cpuUsage: 'var(--nb-text-cpu-usage)',
    memoryLimit: 'var(--nb-text-memory-limit)',
    memoryRecommendation: 'var(--nb-text-memory-recommendation)',
    memoryRequested: 'var(--nb-text-memory-requested)',
    memoryUsage: 'var(--nb-text-memory-usage)',
    debug: 'var(--nb-text-debug)',
    pagination: 'var(--nb-text-pagination)',
    lineChart: 'var(--nb-text-line-chart)',
    availability: 'var(--nb-text-availability)',
    numberComponent: 'var(--nb-text-number-component)',
    green: 'var(--nb-text-green)',
    traceRed: 'var(--nb-text-trace-red)',
    tracBlue: 'var(--nb-text-trace-blue)',
    traceYellow: 'var(--nb-text-trace-yellow)',
    traceGreen: 'var(--nb-text-trace-green)',
    tracePurple: 'var(--nb-text-trace-purple)',
    traceOrange: 'var(--nb-text-trace-orange)',
    traceGray: 'var(--nb-text-trace-gray)',
    traceCyan: 'var(--nb-text-trace-cyan)',
    traceDarkGray: 'var(--nb-text-trace-dark-gray)',
    traceOlive: 'var(--nb-text-trace-olive)',
    traceGold: 'var(--nb-text-trace-gold)',
    traceNavy: 'var(--nb-text-trace-navy)',
    tracePink: 'var(--nb-text-trace-pink)',
    traceBrown: 'var(--nb-text-trace-brown)',
    traceLime: 'var(--nb-text-trace-lime)',
    traceTeal: 'var(--nb-text-trace-teal)',
    traceMagenta: 'var(--nb-text-trace-magenta)',
    darkGray: 'var(--nb-text-dark-gray)',
    barChart: 'var(--nb-text-bar-chart)',
    serviceMap: 'var(--nb-text-service-map)',
    iosSlider: 'var(--nb-text-ios-slider)',
    iosSliderDark: 'var(--nb-text-ios-slider-dark)',
    serviceMapGreen: 'var(--nb-text-service-map-green)',
    serviceMapSkyblue: 'var(--nb-text-service-map-skyblue)',
    serviceMapBlue: 'var(--nb-text-service-map-blue)',
    title: 'var(--nb-text-title)',
    low: 'var(--nb-text-low)',
    sideBar: 'var(--nb-text-sidebar)',
    tertiarymedium: 'var(--nb-text-tertiary-medium)',
    askNudgebeeWelcomeText: 'var(--nb-text-ask-nudgebee-welcome)',
    askNudgebeeUserName: 'var(--nb-text-ask-nudgebee-username)',
    nudgebeeResponse: 'var(--nb-text-nudgebee-response)',
    nudgebeeSuggestionText: 'var(--nb-text-nudgebee-suggestion)',
    responseList: 'var(--nb-text-response-list)',
    searchPlaceholder: 'var(--nb-text-search-placeholder)',
    purpleLabel: 'var(--nb-text-purple-label)',
    orangeLabelDark: 'var(--nb-text-orange-label-dark)',
    mid: 'var(--nb-text-mid)',
    signinDark: 'var(--nb-text-signin-dark)',
    dark: 'var(--nb-text-dark)',
    tertiaryLight: 'var(--nb-text-tertiary-light)',
    quaternary: 'var(--nb-text-quaternary)',
    disabled: 'var(--nb-text-disabled)',
    tabGroupLabel: 'var(--nb-text-tab-group-label)',
    tabGroupArrow: 'var(--nb-text-tab-group-arrow)',
    warning: 'var(--nb-text-warning-text)',
    warningHover: 'var(--nb-text-warning-hover)',
    infoDark: 'var(--nb-text-info-dark)',
    blueChip: 'var(--nb-text-blue-chip)',
    greenChip: 'var(--nb-text-green-chip)',
    pastelPink: 'var(--nb-text-pastel-pink)',
  },
  shadow: {
    card: 'var(--nb-shadow-card)',
    tab: 'var(--nb-shadow-tab)',
    softGray: 'var(--nb-shadow-soft-gray)',
    softBlack: 'var(--nb-shadow-soft-black)',
  },
  background: {
    primary: 'var(--nb-bg-primary)',
    secondary: 'var(--nb-bg-secondary)',
    tertiary: 'var(--nb-bg-tertiary)',
    tertiarymedium: 'var(--nb-bg-tertiary-medium)',
    tertiaryLight: 'var(--nb-bg-tertiary-light)',
    tertiaryLightest: 'var(--nb-bg-tertiary-lightest)',
    pastelPink: 'var(--nb-bg-pastel-pink)',
    tertiaryLightestest: 'var(--nb-bg-tertiary-lightestest)',
    tertiaryLightestestest: 'var(--nb-bg-tertiary-lightestestest)',
    white: 'var(--nb-bg-white)',
    black: 'var(--nb-bg-black)',
    sideBar: 'var(--nb-bg-sidebar)',
    secondaryDark: 'var(--nb-bg-secondary-dark)',
    home: 'var(--nb-bg-home)',
    askNudgebeePage: 'var(--nb-bg-ask-nudgebee-page)',
    pages: 'var(--nb-bg-pages)',
    activeButtonColor: 'var(--nb-bg-active-button-color)',
    primaryLight: 'var(--nb-bg-primary-light)',
    primaryLightest: 'var(--nb-bg-primary-lightest)',
    errorLight: 'var(--nb-bg-error-light)',
    transparent: 'var(--nb-bg-transparent)',
    tableHeader: 'var(--nb-bg-table-header)',
    null: 'var(--nb-bg-null)',
    yellowLabel: 'var(--nb-bg-yellow-label)',
    criticalRed: 'var(--nb-bg-critical-red)',
    blueLabel: 'var(--nb-bg-blue-label)',
    greenLabel: 'var(--nb-bg-green-label)',
    lightRedLabel: 'var(--nb-bg-light-red-label)',
    input: 'var(--nb-bg-input)',
    error: 'var(--nb-bg-error)',
    intigrationCard: 'var(--nb-bg-integration-card)',
    switchTrackDark: 'var(--nb-bg-switch-track-dark)',
    switchTrackLight: 'var(--nb-bg-switch-track-light)',
    switchTrackLightest: 'var(--nb-bg-switch-track-lightest)',
    switchThumb: 'var(--nb-bg-switch-thumb)',
    accordionSummay: 'var(--nb-bg-accordion-summary)',
    activeAnchorButton: 'var(--nb-bg-active-anchor-button)',
    activeTab: 'var(--nb-bg-active-tab)',
    activeTabIndicator: 'var(--nb-bg-active-tab-indicator)',
    anchorActiveTab: 'var(--nb-bg-anchor-active-tab)',
    primaryDark: 'var(--nb-bg-primary-dark)',
    tabIndicator: 'var(--nb-bg-tab-indicator)',
    summaryBlock: 'var(--nb-bg-summary-block)',
    costBlock: 'var(--nb-bg-cost-block)',
    totalRecomendation: 'var(--nb-bg-total-recommendation)',
    red: 'var(--nb-bg-red)',
    recommendationChart: 'var(--nb-bg-recommendation-chart)',
    toggle: 'var(--nb-bg-toggle)',
    ticketDescription: 'var(--nb-bg-ticket-description)',
    buttonTab: 'var(--nb-bg-button-tab)',
    infoGraphic: 'var(--nb-bg-info-graphic)',
    toggleIconBtn: 'var(--nb-bg-toggle-icon-btn)',
    toggleIconBtnHover: 'var(--nb-bg-toggle-icon-btn-hover)',
    codeMirror: 'var(--nb-bg-code-mirror)',
    reactFlow: 'var(--nb-bg-react-flow)',
    titleUnderline: 'var(--nb-bg-title-underline)',
    medium: 'var(--nb-bg-medium)',
    low: 'var(--nb-bg-low)',
    warning: 'var(--nb-bg-warning)',
    lightBox: 'var(--nb-bg-light-box)',
    collapseableCardBG: 'var(--nb-bg-collapseable-card)',
    conversationCardBG: 'var(--nb-bg-conversation-card)',
    selectedConversation: 'var(--nb-bg-selected-conversation)',
    suggestionCardBG: 'var(--nb-bg-suggestion-card)',
    suggestionCardHover: 'var(--nb-bg-suggestion-card-hover)',
    NubiQuestion: 'var(--nb-bg-nubi-question)',
    nubiHover: 'var(--nb-bg-nubi-hover)',
    shimmerBase: 'var(--nb-bg-shimmer-base)',
    shimmerHighlight: 'var(--nb-bg-shimmer-highlight)',
    purpleLabel: 'var(--nb-bg-purple-label)',
    orangeLabel: 'var(--nb-bg-orange-label)',
    brandButton: 'var(--nb-bg-brand-button)',
    brandButtonHover: 'var(--nb-bg-brand-button-hover)',
    tabPrimarySelected: 'var(--nb-bg-tab-primary-selected)',
    warningLight: 'var(--nb-bg-warning-light)',
    warningButton: 'var(--nb-bg-warning-button)',
    warningButtonHover: 'var(--nb-bg-warning-button-hover)',
    warningLightest: 'var(--nb-bg-warning-lightest)',
    blueChip: 'var(--nb-bg-blue-chip)',
    greenChip: 'var(--nb-bg-green-chip)',
  },
  border: {
    primary: 'var(--nb-border-primary)',
    vertical: 'var(--nb-border-vertical)',
    primaryLight: 'var(--nb-border-primary-light)',
    primaryLightest: 'var(--nb-border-primary-lightest)',
    tertiary: 'var(--nb-border-tertiary)',
    secondaryLight: 'var(--nb-border-secondary-light)',
    secondaryLightest: 'var(--nb-border-secondary-lightest)',
    quadrant: 'var(--nb-border-quadrant)',
    errorLight: 'var(--nb-border-error-light)',
    insightCard: 'var(--nb-border-insight-card)',
    secondary: 'var(--nb-border-secondary)',
    chipHover: 'var(--nb-border-chip-hover)',
    success: 'var(--nb-border-success)',
    error: 'var(--nb-border-error)',
    errorOutline: 'var(--nb-border-error-outline)',
    primaryDark: 'var(--nb-border-primary-dark)',
    cpuLimit: 'var(--nb-border-cpu-limit)',
    cpuRecommendation: 'var(--nb-border-cpu-recommendation)',
    cpuRequested: 'var(--nb-border-cpu-requested)',
    logo: 'var(--nb-border-logo)',
    logolight: 'var(--nb-border-logo-light)',
    cpuUsage: 'var(--nb-border-cpu-usage)',
    memoryLimit: 'var(--nb-border-memory-limit)',
    memoryRecommendation: 'var(--nb-border-memory-recommendation)',
    memoryRequested: 'var(--nb-border-memory-requested)',
    memoryUsage: 'var(--nb-border-memory-usage)',
    summaryBlock: 'var(--nb-border-summary-block)',
    ticketDescription: 'var(--nb-border-ticket-description)',
    buttonTab: 'var(--nb-border-button-tab)',
    tertiaryLightest: 'var(--nb-border-tertiary-lightest)',
    paperOutline: 'var(--nb-border-paper-outline)',
    white: 'var(--nb-border-white)',
    queryAutocomplete: 'var(--nb-border-query-autocomplete)',
    input: 'var(--nb-border-input)',
    autocompleteOption: 'var(--nb-border-autocomplete-option)',
    valueWithLeftBorder: 'var(--nb-border-value-with-left-border)',
    conversationCard: 'var(--nb-border-conversation-card)',
    nudgebeeSuggestion: 'var(--nb-border-nudgebee-suggestion)',
    nudgebeeSuggestionHover: 'var(--nb-border-nudgebee-suggestion-hover)',
    warning: 'var(--nb-border-warning)',
    warningLight: 'var(--nb-border-warning-light)',
  },
  button: {
    primary: 'var(--nb-btn-primary)',
    primaryHover: 'var(--nb-btn-primary-hover)',
    primaryText: 'var(--nb-btn-primary-text)',
    primaryDisabled: 'var(--nb-btn-primary-disabled)',
    primaryDisabledText: 'var(--nb-btn-primary-disabled-text)',
    secondary: 'var(--nb-btn-secondary)',
    secondaryText: 'var(--nb-btn-secondary-text)',
    secondaryHover: 'var(--nb-btn-secondary-hover)',
    secondaryBorder: 'var(--nb-btn-secondary-border)',
    secondaryHoverBorder: 'var(--nb-btn-secondary-hover-border)',
    secondaryDisabled: 'var(--nb-btn-secondary-disabled)',
    secondaryDisabledText: 'var(--nb-btn-secondary-disabled-text)',
    secondaryDisabledBorder: 'var(--nb-btn-secondary-disabled-border)',
    tertiaryBorder: 'var(--nb-btn-tertiary-border)',
    tertiary: 'var(--nb-btn-tertiary)',
    tertiaryText: 'var(--nb-btn-tertiary-text)',
    tertiaryHover: 'var(--nb-btn-tertiary-hover)',
    tertiaryHoverBorder: 'var(--nb-btn-tertiary-hover-border)',
    tertiaryDisabled: 'var(--nb-btn-tertiary-disabled)',
    tertiaryDisabledText: 'var(--nb-btn-tertiary-disabled-text)',
    tertiaryDisabledBorder: 'var(--nb-btn-tertiary-disabled-border)',
  },
};

/**
 * Raw hex colors — original hardcoded values.
 * Use these in canvas/Chart.js contexts where CSS var() won't work.
 */
export const rawColors: Colors = {
  primary: 'var(--ds-blue-500)',
  white: 'var(--ds-background-100)',
  black: 'var(--ds-gray-700)',
  secondary: {
    default: 'var(--ds-brand-500)',
    dark: 'var(--ds-gray-400)',
  },
  tertiary: 'var(--ds-gray-600)',
  nudgebeeMain: 'var(--ds-yellow-500)',
  success: 'var(--ds-green-500)',
  error: 'var(--ds-red-600)',
  errorHover: 'var(--ds-red-700)',
  errorText: 'var(--ds-red-500)',
  switchIconColor: 'var(--ds-brand-500)',
  iconColor: 'var(--ds-brand-200)',
  switchIcon: 'var(--ds-blue-200)',
  clusterIndicator: 'var(--ds-green-400)',
  yellow: 'var(--ds-amber-400)',
  editIcon: 'var(--ds-red-300)',
  highest: 'var(--ds-red-500)',
  high: 'var(--ds-red-500)',
  medium: 'var(--ds-amber-400)',
  low: 'var(--ds-blue-500)',
  lowest: 'var(--ds-green-500)',
  lowestLight: 'var(--ds-green-200)',
  NA: 'var(--ds-gray-400)',
  toDo: 'var(--ds-blue-300)',
  done: 'var(--ds-green-300)',
  inProgress: 'var(--ds-yellow-500)',
  open: 'var(--ds-purple-300)',
  critical: 'var(--ds-red-700)',
  info: 'var(--ds-blue-500)',
  debug: 'gray',
  ok: 'var(--ds-green-400)',
  firing: 'var(--ds-red-500)',
  purple: 'purple',
  darkPrimary: 'var(--ds-blue-700)',
  text: {
    primary: 'var(--ds-blue-500)',
    primaryDark: 'var(--ds-blue-500)',
    secondary: 'var(--ds-brand-500)',
    white: 'var(--ds-background-100)',
    black: 'var(--ds-gray-700)',
    secondaryDark: 'var(--ds-gray-400)',
    greyDark: 'var(--ds-gray-600)',
    tertiary: 'var(--ds-gray-600)',
    tertiaryLight: 'var(--ds-gray-400)',
    null: 'var(--ds-gray-500)',
    yellowLabel: 'var(--ds-amber-400)',
    orangeLabel: 'var(--ds-amber-400)',
    disabledInput: 'var(--ds-gray-400)',
    delete: 'var(--ds-red-300)',
    red: 'red',
    checkBoxLabel: 'var(--ds-gray-600)',
    currency: 'var(--ds-green-500)',
    primaryLight: 'var(--ds-blue-400)',
    divider: 'var(--ds-gray-200)',
    lastSync: 'var(--ds-brand-300)',
    currencyPrimaryDark: 'var(--ds-brand-500)',
    cpuLimit: 'var(--ds-red-500)',
    cpuRecommendation: 'var(--ds-green-500)',
    cpuRequested: 'var(--ds-blue-500)',
    cpuUsage: 'var(--ds-amber-400)',
    memoryLimit: 'var(--ds-red-500)',
    memoryRecommendation: 'var(--ds-green-500)',
    memoryRequested: 'var(--ds-blue-500)',
    memoryUsage: 'var(--ds-amber-400)',
    debug: 'var(--ds-gray-100)',
    pagination: 'var(--ds-brand-500)',
    lineChart: 'var(--ds-purple-500)',
    availability: 'var(--ds-gray-400)',
    numberComponent: 'var(--ds-brand-600)',
    green: 'green',
    traceRed: 'rgba(255, 99, 132, 0.2)',
    tracBlue: 'rgba(54, 162, 235, 0.2)',
    traceYellow: 'rgba(255, 206, 86, 0.2)',
    traceGreen: 'rgba(75, 192, 192, 0.2)',
    tracePurple: 'rgba(153, 102, 255, 0.2)',
    traceOrange: 'rgba(255, 159, 64, 0.2)',
    traceGray: 'rgba(199, 199, 199, 0.2)',
    traceCyan: 'rgba(0, 255, 255, 0.2)',
    traceDarkGray: 'rgba(100, 100, 100, 0.2)',
    traceOlive: 'rgba(128, 128, 0, 0.2)',
    traceGold: 'rgba(255, 215, 0, 0.2)',
    traceNavy: 'rgba(0, 0, 128, 0.2)',
    tracePink: 'rgba(255, 105, 180, 0.2)',
    traceBrown: 'rgba(165, 42, 42, 0.2)',
    traceLime: 'rgba(191, 255, 0, 0.2)',
    traceTeal: 'rgba(0, 128, 128, 0.2)',
    traceMagenta: 'rgba(255, 0, 255, 0.2)',
    darkGray: 'darkgray',
    barChart: 'var(--ds-blue-500)',
    serviceMap: 'var(--ds-red-600)',
    iosSlider: 'var(--ds-blue-600)',
    iosSliderDark: 'var(--ds-blue-500)',
    serviceMapGreen: 'var(--ds-teal-400)',
    serviceMapSkyblue: 'var(--ds-blue-300)',
    serviceMapBlue: 'blue',
    title: 'var(--ds-brand-600)',
    low: 'var(--ds-yellow-700)',
    sideBar: 'var(--ds-brand-600)',
    tertiarymedium: 'var(--ds-brand-200)',
    askNudgebeeWelcomeText: 'var(--ds-brand-500)',
    askNudgebeeUserName: 'var(--ds-blue-500)',
    nudgebeeResponse: 'var(--ds-blue-700)',
    nudgebeeSuggestionText: 'var(--ds-brand-500)',
    responseList: 'var(--ds-brand-500)',
    searchPlaceholder: 'var(--ds-brand-200)',
    purpleLabel: 'var(--ds-purple-600)',
    orangeLabelDark: 'var(--ds-amber-500)',
    mid: 'var(--ds-brand-400)',
    signinDark: 'var(--ds-gray-700)',
    dark: 'var(--ds-brand-600)',
    quaternary: 'var(--ds-gray-400)',
    disabled: 'var(--ds-brand-200)',
    tabGroupLabel: 'var(--ds-gray-600)',
    tabGroupArrow: 'var(--ds-brand-300)',
    warning: 'var(--ds-amber-700)',
    warningHover: 'var(--ds-amber-700)',
    infoDark: 'var(--ds-blue-700)',
    blueChip: 'var(--ds-blue-600)',
    greenChip: 'var(--ds-green-600)',
    pastelPink: 'var(--ds-pink-600)',
  },
  shadow: {
    card: '0px 4px 20px -1px rgba(229, 229, 229, 0.4), 0px 2px 20px 0px rgb(233, 233, 233)',
    tab: '0px 4px 10px -1px rgba(229, 229, 229, 0.2), 0px 2px 10px 0px rgb(233, 233, 233)',
    softGray: '0px 4px 20px 0px rgba(180, 180, 180, 0.12)',
    softBlack: '0px 1px 3px 0px rgba(0, 0, 0, 0.10)',
  },
  background: {
    primary: 'var(--ds-blue-500)',
    secondary: 'var(--ds-brand-500)',
    tertiary: 'var(--ds-gray-600)',
    tertiarymedium: 'var(--ds-brand-200)',
    tertiaryLight: 'var(--ds-gray-100)',
    tertiaryLightest: 'var(--ds-gray-100)',
    tertiaryLightestest: 'var(--ds-background-200)',
    tertiaryLightestestest: 'var(--ds-background-200)',
    white: 'var(--ds-background-100)',
    black: 'var(--ds-gray-700)',
    sideBar: 'var(--ds-brand-600)',
    secondaryDark: 'var(--ds-gray-400)',
    home: 'var(--ds-background-100)',
    askNudgebeePage: 'var(--ds-background-100)',
    pages: 'var(--ds-background-300)',
    activeButtonColor: '#D9D9D933',
    primaryLight: 'var(--ds-blue-300)',
    primaryLightest: 'var(--ds-blue-100)',
    errorLight: 'var(--ds-red-200)',
    transparent: 'transparent',
    tableHeader: 'var(--ds-blue-100)',
    null: 'var(--ds-background-300)',
    yellowLabel: 'var(--ds-yellow-100)',
    criticalRed: 'var(--ds-red-500)',
    blueLabel: 'var(--ds-blue-200)',
    greenLabel: 'linear-gradient(95deg, var(--ds-green-100) 7.65%, #F0FFF4 103.54%)',
    lightRedLabel: 'linear-gradient(95deg, var(--ds-red-100) 7.65%, #FFF0F0 103.54%)',
    input: 'var(--ds-gray-100)',
    error: 'var(--ds-red-600)',
    intigrationCard: 'var(--ds-background-100)',
    switchTrackDark: 'var(--ds-green-500)',
    switchTrackLight: 'var(--ds-green-400)',
    switchTrackLightest: 'var(--ds-teal-500)',
    switchThumb: 'var(--ds-green-400)',
    accordionSummay: 'var(--ds-red-100)',
    activeAnchorButton: 'var(--ds-blue-200)',
    activeTab: 'var(--ds-red-200)',
    activeTabIndicator: 'var(--ds-red-400)',
    anchorActiveTab: 'var(--ds-blue-200)',
    primaryDark: 'var(--ds-blue-500)',
    tabIndicator: 'var(--ds-red-400)',
    summaryBlock: 'var(--ds-green-100)',
    costBlock: 'var(--ds-background-200)',
    totalRecomendation: 'var(--ds-blue-100)',
    red: 'red',
    recommendationChart: 'var(--ds-background-200)',
    toggle: 'var(--ds-blue-100)',
    ticketDescription: 'var(--ds-background-200)',
    buttonTab: 'var(--ds-brand-100)',
    infoGraphic: 'var(--ds-blue-100)',
    toggleIconBtn: 'var(--ds-background-100)',
    toggleIconBtnHover: 'var(--ds-brand-100)',
    codeMirror: 'var(--ds-background-300)',
    reactFlow: 'var(--ds-gray-200)',
    titleUnderline: 'rgba(49, 98, 208, 0.4)',
    medium: 'var(--ds-red-100)',
    low: 'var(--ds-yellow-100)',
    warning: 'var(--ds-amber-300)',
    lightBox: 'var(--ds-background-200)',
    collapseableCardBG: 'var(--ds-blue-100)',
    conversationCardBG: 'var(--ds-background-200)',
    selectedConversation: 'var(--ds-brand-200)',
    suggestionCardBG: 'var(--ds-background-200)',
    suggestionCardHover: 'var(--ds-background-300)',
    NubiQuestion: 'var(--ds-background-300)',
    nubiHover: 'var(--ds-amber-100)',
    shimmerBase: 'var(--ds-background-300)',
    shimmerHighlight: 'var(--ds-background-200)',
    purpleLabel: 'var(--ds-brand-100)',
    orangeLabel: 'var(--ds-amber-100)',
    brandButton: 'var(--ds-yellow-500)',
    brandButtonHover: 'var(--ds-yellow-600)',
    tabPrimarySelected: 'var(--ds-brand-500)',
    warningLight: 'var(--ds-yellow-100)',
    warningButton: 'var(--ds-yellow-200)',
    warningButtonHover: 'var(--ds-yellow-300)',
    warningLightest: 'var(--ds-yellow-200)',
    blueChip: 'var(--ds-blue-100)',
    greenChip: 'var(--ds-green-100)',
    pastelPink: 'var(--ds-red-100)',
  },
  border: {
    primary: 'var(--ds-blue-500)',
    vertical: 'var(--ds-gray-200)',
    primaryLight: 'var(--ds-blue-300)',
    primaryLightest: 'var(--ds-blue-400)',
    tertiary: 'var(--ds-blue-300)',
    secondaryLight: 'var(--ds-gray-200)',
    secondaryLightest: 'var(--ds-gray-300)',
    quadrant: 'var(--ds-blue-500)',
    errorLight: 'var(--ds-red-200)',
    insightCard: 'var(--ds-yellow-300)',
    secondary: 'var(--ds-brand-200)',
    chipHover: 'var(--ds-gray-500)',
    success: 'var(--ds-green-400)',
    error: 'var(--ds-red-500)',
    errorOutline: 'var(--ds-red-600)',
    primaryDark: 'rgba(49, 98, 208, 0.30)',
    cpuLimit: 'var(--ds-red-500)',
    cpuRecommendation: 'var(--ds-green-500)',
    cpuRequested: 'var(--ds-blue-500)',
    logo: 'var(--ds-yellow-500)',
    logolight: 'var(--ds-amber-200)',
    cpuUsage: 'var(--ds-amber-400)',
    memoryLimit: 'var(--ds-red-500)',
    memoryRecommendation: 'var(--ds-green-500)',
    memoryRequested: 'var(--ds-blue-500)',
    memoryUsage: 'var(--ds-amber-400)',
    summaryBlock: 'var(--ds-brand-300)',
    ticketDescription: 'var(--ds-gray-300)',
    buttonTab: 'var(--ds-blue-700)',
    tertiaryLightest: 'var(--ds-gray-100)',
    paperOutline: 'var(--ds-red-300)',
    white: 'var(--ds-background-100)',
    queryAutocomplete: 'var(--ds-brand-400)',
    input: 'var(--ds-brand-200)',
    autocompleteOption: 'var(--ds-gray-300)',
    valueWithLeftBorder: 'var(--ds-brand-700)',
    conversationCard: 'var(--ds-brand-400)',
    nudgebeeSuggestion: 'var(--ds-brand-150)',
    nudgebeeSuggestionHover: 'var(--ds-brand-200)',
    warning: 'var(--ds-amber-400)',
    warningLight: 'var(--ds-yellow-300)',
  },
  button: {
    primary: 'var(--ds-blue-500)',
    primaryHover: 'var(--ds-blue-500)',
    primaryText: 'var(--ds-background-100)',
    primaryDisabled: 'var(--ds-blue-300)',
    primaryDisabledText: 'var(--ds-background-100)',
    secondary: 'var(--ds-background-100)',
    secondaryText: 'var(--ds-gray-600)',
    secondaryHover: 'var(--ds-background-200)',
    secondaryBorder: 'var(--ds-brand-200)',
    secondaryHoverBorder: 'var(--ds-brand-200)',
    secondaryDisabled: 'var(--ds-background-200)',
    secondaryDisabledText: 'var(--ds-brand-200)',
    secondaryDisabledBorder: 'var(--ds-gray-200)',
    tertiaryBorder: 'var(--ds-blue-400)',
    tertiary: 'var(--ds-background-100)',
    tertiaryText: 'var(--ds-blue-500)',
    tertiaryHover: 'var(--ds-blue-100)',
    tertiaryHoverBorder: 'var(--ds-blue-400)',
    tertiaryDisabled: 'var(--ds-background-100)',
    tertiaryDisabledText: 'var(--ds-blue-300)',
    tertiaryDisabledBorder: 'var(--ds-blue-300)',
  },
};

/**
 * Design System tokens (--ds-*).
 * Source of truth: app/design-system/shared/styles.css
 * New code MUST prefer `ds.*` over `colors.*`. The `colors` proxy stays
 * available until adoption migrates every call site.
 */
export const ds = {
  background: {
    100: 'var(--ds-background-100)',
    200: 'var(--ds-background-200)',
    300: 'var(--ds-background-300)',
  },
  gray: {
    100: 'var(--ds-gray-100)',
    200: 'var(--ds-gray-200)',
    300: 'var(--ds-gray-300)',
    400: 'var(--ds-gray-400)',
    500: 'var(--ds-gray-500)',
    600: 'var(--ds-gray-600)',
    700: 'var(--ds-gray-700)',
    alpha: {
      100: 'var(--ds-gray-alpha-100)',
      200: 'var(--ds-gray-alpha-200)',
      300: 'var(--ds-gray-alpha-300)',
      400: 'var(--ds-gray-alpha-400)',
      500: 'var(--ds-gray-alpha-500)',
      600: 'var(--ds-gray-alpha-600)',
      700: 'var(--ds-gray-alpha-700)',
    },
  },
  blue: {
    100: 'var(--ds-blue-100)',
    200: 'var(--ds-blue-200)',
    300: 'var(--ds-blue-300)',
    400: 'var(--ds-blue-400)',
    500: 'var(--ds-blue-500)',
    600: 'var(--ds-blue-600)',
    700: 'var(--ds-blue-700)',
  },
  red: {
    100: 'var(--ds-red-100)',
    200: 'var(--ds-red-200)',
    300: 'var(--ds-red-300)',
    400: 'var(--ds-red-400)',
    500: 'var(--ds-red-500)',
    600: 'var(--ds-red-600)',
    700: 'var(--ds-red-700)',
  },
  amber: {
    100: 'var(--ds-amber-100)',
    200: 'var(--ds-amber-200)',
    300: 'var(--ds-amber-300)',
    400: 'var(--ds-amber-400)',
    500: 'var(--ds-amber-500)',
    600: 'var(--ds-amber-600)',
    700: 'var(--ds-amber-700)',
  },
  green: {
    100: 'var(--ds-green-100)',
    200: 'var(--ds-green-200)',
    300: 'var(--ds-green-300)',
    400: 'var(--ds-green-400)',
    500: 'var(--ds-green-500)',
    600: 'var(--ds-green-600)',
    700: 'var(--ds-green-700)',
  },
  teal: {
    50: 'var(--ds-teal-50)',
    100: 'var(--ds-teal-100)',
    200: 'var(--ds-teal-200)',
    300: 'var(--ds-teal-300)',
    400: 'var(--ds-teal-400)',
    500: 'var(--ds-teal-500)',
    600: 'var(--ds-teal-600)',
    700: 'var(--ds-teal-700)',
  },
  purple: {
    100: 'var(--ds-purple-100)',
    200: 'var(--ds-purple-200)',
    300: 'var(--ds-purple-300)',
    400: 'var(--ds-purple-400)',
    500: 'var(--ds-purple-500)',
    600: 'var(--ds-purple-600)',
    700: 'var(--ds-purple-700)',
  },
  pink: {
    100: 'var(--ds-pink-100)',
    200: 'var(--ds-pink-200)',
    300: 'var(--ds-pink-300)',
    400: 'var(--ds-pink-400)',
    500: 'var(--ds-pink-500)',
    600: 'var(--ds-pink-600)',
    700: 'var(--ds-pink-700)',
  },
  /** Brand navy ("Sidebar Dark"), anchored at #1B2D4A.
   *  Use 600 for primary-button rest, 500 for hover, 700 for active. 100/200
   *  for selected-row tints and dividers. Never tone destructive / cost-axis
   *  surfaces with brand. */
  brand: {
    100: 'var(--ds-brand-100)',
    150: 'var(--ds-brand-150)',
    200: 'var(--ds-brand-200)',
    300: 'var(--ds-brand-300)',
    400: 'var(--ds-brand-400)',
    500: 'var(--ds-brand-500)',
    600: 'var(--ds-brand-600)',
    700: 'var(--ds-brand-700)',
  },
  /** Brand yellow ("Nudgebee Yellow"), anchored at #FACF39.
   *  Reserved for focus rings, brand sigil bg, marketing accents. Never a
   *  status / warning colour — that's amber. */
  yellow: {
    100: 'var(--ds-yellow-100)',
    200: 'var(--ds-yellow-200)',
    300: 'var(--ds-yellow-300)',
    400: 'var(--ds-yellow-400)',
    500: 'var(--ds-yellow-500)',
    600: 'var(--ds-yellow-600)',
    700: 'var(--ds-yellow-700)',
  },
  text: {
    caption: 'var(--ds-text-caption)',
    small: 'var(--ds-text-small)',
    body: 'var(--ds-text-body)',
    bodyLg: 'var(--ds-text-body-lg)',
    title: 'var(--ds-text-title)',
    heading: 'var(--ds-text-heading)',
    display: 'var(--ds-text-display)',
  },
  weight: {
    regular: 'var(--ds-font-weight-regular)',
    medium: 'var(--ds-font-weight-medium)',
    semibold: 'var(--ds-font-weight-semibold)',
  },
  font: {
    sans: 'var(--ds-font-sans)',
    mono: 'var(--ds-font-mono)',
  },
  space: {
    0: 'var(--ds-space-0)',
    1: 'var(--ds-space-1)',
    2: 'var(--ds-space-2)',
    3: 'var(--ds-space-3)',
    4: 'var(--ds-space-4)',
    5: 'var(--ds-space-5)',
    6: 'var(--ds-space-6)',
    7: 'var(--ds-space-7)',
    mul: (step: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7, multiplier: number): string => `calc(var(--ds-space-${step}) * ${multiplier})`,
  },
  radius: {
    sm: 'var(--ds-radius-sm)',
    md: 'var(--ds-radius-md)',
    lg: 'var(--ds-radius-lg)',
    xl: 'var(--ds-radius-xl)',
    pill: 'var(--ds-radius-pill)',
  },
  motion: {
    micro: 'var(--ds-motion-micro)',
    panel: 'var(--ds-motion-panel)',
    ease: 'var(--ds-motion-ease)',
  },
} as const;

/**
 * Resolve a CSS custom property to its computed value.
 * Use in canvas/Chart.js contexts where CSS var() strings won't work.
 * Accepts both "var(--nb-color-x)" and "--nb-color-x" formats.
 * Non-variable strings (e.g. "#FF0000", "red") are returned as-is.
 */
export function resolveColor(value: string): string {
  if (!value) return value;
  const varMatch = /^var\((--[^)]+)\)$/.exec(value);
  let prop: string | null = null;
  if (varMatch) {
    prop = varMatch[1];
  } else if (value.startsWith('--')) {
    prop = value;
  }
  if (!prop) return value; // already a resolved color
  if (typeof document === 'undefined') return value; // return original during SSR
  return getComputedStyle(document.documentElement).getPropertyValue(prop).trim() || value;
}

/**
 * Resolve an array of color values for use with Chart.js canvas rendering.
 */
export function resolveColors(values: string[]): string[] {
  return values.map(resolveColor);
}

/**
 * Apply alpha/opacity to any resolved color string.
 * Handles hex (#RGB, #RRGGBB, #RRGGBBAA), rgb(), and rgba() formats.
 * Use this instead of string concatenation (e.g. color + '70') which breaks with rgb() values.
 */
export function withAlpha(color: string, alpha: number): string {
  if (!color) return color;
  // Handle rgb/rgba
  const rgbMatch = /^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(color);
  if (rgbMatch) {
    return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
  }
  // Handle hex
  if (color.startsWith('#')) {
    const hex = color.slice(1);
    let r: number, g: number, b: number;
    if (hex.length === 3) {
      r = parseInt(hex[0] + hex[0], 16);
      g = parseInt(hex[1] + hex[1], 16);
      b = parseInt(hex[2] + hex[2], 16);
    } else {
      r = parseInt(hex.slice(0, 2), 16);
      g = parseInt(hex.slice(2, 4), 16);
      b = parseInt(hex.slice(4, 6), 16);
    }
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  }
  return color;
}
