/**
 * @file _themes.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 29.08.2025
 * @@VERSION@@
 * @brief Token für Colors.
 *
 * Diese Datei enthält core-Token, um die Colors zu definieren.
 * Variationen (Light und Dark).
 */

@mixin light-color {
    /* action */
    --kern-color-action-default: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
    --kern-color-action-on-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
    --kern-color-action-visited: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
    
    /* action-focus */
    --kern-color-action-focus-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    --kern-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
    --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));

    /* action-state */
    /* action-state-indicator */
    --kern-color-action-state-indicator-default: var(--kern-color-action-default);
    --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
    --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
    
    /* action-state-opacity */
    --kern-color-action-state-opacity-hover: 92%; // INFO: Excluded from Theming
    --kern-color-action-state-opacity-pressed: 0.32; // INFO: Excluded from Theming
    --kern-color-action-state-opacity-selected: 0.12; // INFO: Excluded from Theming
    --kern-color-action-state-opacity-disabled: 0.4; // INFO: Excluded from Theming
    --kern-color-action-state-opacity-active: 84%; // INFO: Excluded from Theming
    --kern-color-action-state-opacity-overlay: 0.72; // INFO: Excluded from Theming

    /* feedback */
    --kern-color-feedback-danger: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
    --kern-color-feedback-danger-background: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
    --kern-color-feedback-info: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
    --kern-color-feedback-success: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
    --kern-color-feedback-warning: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
    --kern-color-feedback-warning-background: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
    
    /* feedback-loader */
    --kern-color-feedback-loader: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    --kern-color-feedback-loader-background: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));

    /* form-inputs */
    --kern-color-form-input-background: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
    --kern-color-form-input-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
    --kern-color-form-input-border: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));

    /* layout */
    --kern-color-layout-border: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
    
    /* layout-text */
    --kern-color-layout-text-default: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
    --kern-color-layout-text-inverse: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
    --kern-color-layout-text-muted: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));

    /* layout-background */
    --kern-color-layout-background-default: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue));
    --kern-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
    --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue)); 
    --kern-color-layout-background-overlay: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming

    // Actins Hover Active
    --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-hover)));
    --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-active)));
    
    // --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
    // --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-100-chroma) var(--kern-darkblue-100-hue));

    // Opacity
    --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover));
    --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active));
}

@mixin dark-colors {
/* action */
    --kern-color-action-default: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
    --kern-color-action-on-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
    --kern-color-action-visited: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));

    /* action-focus */
    --kern-color-action-focus-background: oklch(var(--kern-neutral-400-lightness) var(--kern-neutral-400-chroma) var(--kern-neutral-400-hue));
    --kern-color-action-focus-border-inside: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
    --kern-color-action-focus-border-outside: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));

    /* action-state */
    /* action-state-indicator */
    --kern-color-action-state-indicator-default: var(--kern-color-action-default);
    --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
    --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
    
    /* action-state-opacity */
    --kern-color-action-state-opacity-hover: 88%;
    --kern-color-action-state-opacity-pressed: 0.32;
    --kern-color-action-state-opacity-selected: 0.12;
    --kern-color-action-state-opacity-disabled: 0.4;
    --kern-color-action-state-opacity-active: 84%;
    --kern-color-action-state-opacity-overlay: 0.72;

    /* feedback */
    --kern-color-feedback-danger: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
    --kern-color-feedback-danger-background: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
    --kern-color-feedback-info: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
    --kern-color-feedback-info-background: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
    --kern-color-feedback-success: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
    --kern-color-feedback-success-background: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
    --kern-color-feedback-warning: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
    --kern-color-feedback-warning-background: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
    
    /* feedback-loader */
    --kern-color-feedback-loader: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
    --kern-color-feedback-loader-background: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));

   /* form-inputs */
    --kern-color-form-input-background: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
    --kern-color-form-input-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
    --kern-color-form-input-border: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));

    /* layout */
    --kern-color-layout-border: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
    
    /* layout-text */
    --kern-color-layout-text-default: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
    --kern-color-layout-text-inverse: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
    --kern-color-layout-text-muted: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));

    /* layout-background */
    --kern-color-layout-background-default: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
    --kern-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));
    --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue));
    --kern-color-layout-background-overlay: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity
    
    // Actins Hover Active
    --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-hover)));
    --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-active)));

    // --kern-color-action-state-indicator-tint-hover: oklch(var(--kern-darkblue-950-lightness) var(--kern-darkblue-950-chroma) var(--kern-darkblue-950-hue));
    // --kern-color-action-state-indicator-tint-active: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));

    // Opacity
    --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover));
    --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active)); 
}

@media (prefers-color-scheme: dark) {
    :root {
        @include dark-colors;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        @include light-color;
    }
}

[data-kern-theme=light],
.kern-light {
    @include light-color;
}

[data-kern-theme=dark],
.kern-dark {
    @include dark-colors;
}