@use "sass:color";
@use "sass:map";
@use 'cds-palette-light' as *;

:root,
[data-theme="light"] {

    --cds-color-always-white: white;
    --cds-color-always-black: black;

    /////// TEXT: Used for text and icons

    --cds-color-text-default: #{$palette-neutral-1000};
    --cds-color-text-subtle: #{$palette-neutral-800};
    --cds-color-text-muted: #{$palette-neutral-600};
    --cds-color-text-surface: #{$palette-neutral-400};
    --cds-color-text-inverse: #{$palette-neutral-000};

    --cds-color-text-default--hover: #{map.get(map.get($color_accent-palettes, 'primary'), 500)};
    --cds-color-text-subtle--hover: #{map.get(map.get($color_accent-palettes, 'primary'), 400)};
    --cds-color-text-muted--hover: #{map.get(map.get($color_accent-palettes, 'primary'), 300)};
    --cds-color-text-surface--hover: #{map.get(map.get($color_accent-palettes, 'primary'), 200)};
    --cds-color-text-inverse--hover: #{$palette-neutral-100};

    --cds-color-text-default--active: #{map.get(map.get($color_accent-palettes, 'primary'), 600)};
    --cds-color-text-subtle--active: #{map.get(map.get($color_accent-palettes, 'primary'),500)};
    --cds-color-text-muted--active: #{map.get(map.get($color_accent-palettes, 'primary'), 400)};
    --cds-color-text-surface--active: #{map.get(map.get($color_accent-palettes, 'primary'), 300)};
    --cds-color-text-inverse--active: #{$palette-neutral-200};

    /////// BACKGROUND
    --cds-color-background-edge: #{color.adjust($palette-neutral-000, $lightness: 4%)};

    // Base
    --cds-color-background-default: #{$palette-neutral-000};
    --cds-color-background-soft: #{$palette-neutral-100};
    --cds-color-background-medium: #{$palette-neutral-200};
    --cds-color-background-deep: #{$palette-neutral-300};
    --cds-color-background-inverse: #{$palette-neutral-1000};

    // Hover
    --cds-color-background-default--hover: #{$palette-neutral-100};
    --cds-color-background-soft--hover: #{$palette-neutral-200};
    --cds-color-background-medium--hover: #{$palette-neutral-300};
    --cds-color-background-deep--hover: #{$palette-neutral-400};
    --cds-color-background-inverse--hover: #{$palette-neutral-800};

    // Active
    --cds-color-background-default--active: #{$palette-neutral-200};
    --cds-color-background-soft--active: #{$palette-neutral-300};
    --cds-color-background-medium--active: #{$palette-neutral-400};
    --cds-color-background-deep--active: #{$palette-neutral-500};
    --cds-color-background-inverse--active: #{$palette-neutral-700};

    /////// BORDER

    // Scale Base
    --cds-color-border-default: #{$palette-neutral-500};
    --cds-color-border-muted: #{$palette-neutral-300};

    // Hover
    --cds-color-border-default--hover: #{$palette-neutral-700};

    /////// FOCUS

    --cds-color-focus-outline: #{$palette-neutral-300};

    @each $key, $palette in $color_accent-palettes {
        --cds-color-accent-#{$key}-main: #{map.get($palette, 500)};
        --cds-color-accent-#{$key}-main--hover: #{map.get($palette, 600)};
        --cds-color-accent-#{$key}-main--active: #{map.get($palette, 700)};
    }

    @each $key, $palette in $color_feedback-palettes {
        --cds-color-feedback-#{$key}-pale: #{map.get($palette, 100)};
        --cds-color-feedback-#{$key}-main: #{map.get($palette, 500)};
        --cds-color-feedback-#{$key}-strong: #{map.get($palette, 900)};
    }

    @each $key, $palette in $color_alternative-palettes {
        --cds-color-alternative-#{$key}-main: #{map.get($palette, 500)};
        --cds-color-alternative-#{$key}-strong: #{map.get($palette, 900)};
        --cds-color-alternative-#{$key}-pale: #{map.get($palette, 100)};
        --cds-color-alternative-#{$key}-main--hover: #{map.get($palette, 600)};
        --cds-color-alternative-#{$key}-main--active: #{map.get($palette, 700)};
        --cds-color-alternative-#{$key}-pale--hover: #{map.get($palette, 200)};
        --cds-color-alternative-#{$key}-pale--active: #{map.get($palette, 300)};
    }
}