/**
 * @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 07.05.2026
 * @@VERSION@@
 * @brief Token für Colors.
 *
 * Diese Datei enthält core-Token, um die Colors zu definieren.
 * Variationen (Light und Dark).
 */

@mixin light-colors {
    /* layout */
    --kern-color-layout-border: var(--kern-color-neutral-500);
    --kern-color-layout-border-level-1: var(--kern-color-neutral-600);
    --kern-color-layout-border-level-2: var(--kern-color-neutral-500);

    /* layout-text */
    --kern-color-layout-text-default: var(--kern-color-neutral-950);
    --kern-color-layout-text-muted: var(--kern-color-neutral-650);
    --kern-color-layout-text-inverse: var(--kern-color-neutral-025);

    /* layout-background */
    --kern-color-layout-background-default: var(--kern-color-white);
    --kern-color-layout-background-hued: var(--kern-color-neutral-025);
    --kern-color-layout-background-default-surface: var(--kern-color-neutral-025);
    --kern-color-layout-background-level-1: var(--kern-color-neutral-025);
    --kern-color-layout-background-level-1-surface: var(--kern-color-white);
    --kern-color-layout-background-level-2: var(--kern-color-white);
    --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-025);

    /* action */
    --kern-color-action-default: var(--kern-color-darkblue-700);
    --kern-color-action-on-default: var(--kern-color-white);
    --kern-color-action-visited: var(--kern-color-violet-700);

    /* action-focus */
    --kern-color-action-focus-default: var(--kern-color-neutral-700);

    /* action-state-opacity */
    --kern-color-action-state-opacity-hover: 92%; // INFO: Excluded from Theming
    --kern-color-action-state-opacity-active: 84%; // 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-overlay: 0.72; // INFO: Excluded from Theming

    /* action-state-indicator */
    --kern-color-action-state-indicator-default: var(--kern-color-action-default);
    --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
    --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);

    /* form-inputs */
    --kern-color-form-input-border: var(--kern-color-neutral-900);

    /* feedback */
    --kern-color-feedback-default: var(--kern-color-neutral-700);
    --kern-color-feedback-default-background: var(--kern-color-neutral-100);
    --kern-color-feedback-danger: var(--kern-color-red-600);
    --kern-color-feedback-danger-background: var(--kern-color-red-050);
    --kern-color-feedback-info: var(--kern-color-lightblue-600);
    --kern-color-feedback-info-background: var(--kern-color-lightblue-050);
    --kern-color-feedback-success: var(--kern-color-turquois-600);
    --kern-color-feedback-success-background: var(--kern-color-turquois-050);
    --kern-color-feedback-warning: var(--kern-color-orange-600);
    --kern-color-feedback-warning-background: var(--kern-color-orange-050);

    /* decorative-brand */
    --kern-color-decorative-brand-default: var(--kern-color-neutral-700);

    /* decorative-border */
    --kern-color-decorative-border-default: var(--kern-color-neutral-200);
    --kern-color-decorative-border-level-1: var(--kern-color-neutral-300);
    --kern-color-decorative-border-level-2: var(--kern-color-neutral-200);


    // TODO: Wird noch benutzt, kann eventuell weg!!!
    /* layout-background */
    --kern-color-layout-background-inverted: var(--kern-color-black);
    --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-white) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
    /* form-inputs */
    --kern-color-form-input-background: var(--kern-color-neutral-025);

    // 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)));

    // 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 {
    /* layout */
    --kern-color-layout-border: var(--kern-color-neutral-500);
    --kern-color-layout-border-level-1: var(--kern-color-neutral-450);
    --kern-color-layout-border-level-2: var(--kern-color-neutral-400);

    /* layout-text */
    --kern-color-layout-text-default: var(--kern-color-neutral-025);
    --kern-color-layout-text-muted: var(--kern-color-neutral-250);
    --kern-color-layout-text-inverse: var(--kern-color-neutral-950);

    /* layout-background */
    --kern-color-layout-background-default: var(--kern-color-black);
    --kern-color-layout-background-hued: var(--kern-color-neutral-950);
    --kern-color-layout-background-default-surface: var(--kern-color-neutral-950);
    --kern-color-layout-background-level-1: var(--kern-color-neutral-950);
    --kern-color-layout-background-level-1-surface: var(--kern-color-neutral-900);
    --kern-color-layout-background-level-2: var(--kern-color-neutral-900);
    --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-950);

    /* action */
    --kern-color-action-default: var(--kern-color-darkblue-300);
    --kern-color-action-on-default: var(--kern-color-black);
    --kern-color-action-visited: var(--kern-color-violet-300);

    /* action-focus */
    --kern-color-action-focus-default: var(--kern-color-neutral-300);

    /* action-state-opacity */
    --kern-color-action-state-opacity-hover: 88%;
    --kern-color-action-state-opacity-active: 76%;
    --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-overlay: 0.72;

    /* action-state-indicator */
    --kern-color-action-state-indicator-default: var(--kern-color-action-default);
    --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
    --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);

    /* form-inputs */
    --kern-color-form-input-border: var(--kern-color-neutral-050);

    /* feedback */
    --kern-color-feedback-default: var(--kern-color-neutral-050);
    --kern-color-feedback-default-background: var(--kern-color-neutral-700);
    --kern-color-feedback-danger: var(--kern-color-red-400);
    --kern-color-feedback-danger-background: var(--kern-color-red-900);
    --kern-color-feedback-info: var(--kern-color-lightblue-400);
    --kern-color-feedback-info-background: var(--kern-color-lightblue-900);
    --kern-color-feedback-success: var(--kern-color-turquois-400);
    --kern-color-feedback-success-background: var(--kern-color-turquois-900);
    --kern-color-feedback-warning: var(--kern-color-orange-400);
    --kern-color-feedback-warning-background: var(--kern-color-orange-900);

    /* decorative-brand */
    --kern-color-decorative-brand-default: var(--kern-color-neutral-300);

    /* decorative-border */
    --kern-color-decorative-border-default: var(--kern-color-neutral-700);
    --kern-color-decorative-border-level-1: var(--kern-color-neutral-650);
    --kern-color-decorative-border-level-2: var(--kern-color-neutral-600);



    // TODO: Wird noch benutzt, kann eventuell weg!!!
    /* layout-background */
    --kern-color-layout-background-inverted: var(--kern-color-white);
    --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming

    /* form-inputs */
    --kern-color-form-input-background: var(--kern-color-neutral-900);

    // 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)));

    // 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 accent-light-colors {
//     /* layout */
//     --kern-color-layout-border: var(--kern-color-darkblue-200);
//     --kern-color-layout-border-level-1: var(--kern-color-darkblue-200);
//     --kern-color-layout-border-level-2: var(--kern-color-darkblue-200);
// 
//     /* layout-text */
//     --kern-color-layout-text-default: var(--kern-color-white);
//     --kern-color-layout-text-muted: var(--kern-color-neutral-150);
//     --kern-color-layout-text-inverse: var(--kern-color-neutral-950);
// 
//     /* layout-background */
//     --kern-color-layout-background-default: var(--kern-color-neutral-700);
//     --kern-color-layout-background-hued: var(--kern-color-neutral-800);
//     --kern-color-layout-background-default-surface: var(--kern-color-neutral-800);
//     --kern-color-layout-background-level-1: var(--kern-color-neutral-700);
//     --kern-color-layout-background-level-1-surface: var(--kern-color-neutral-800);
//     --kern-color-layout-background-level-2: var(--kern-color-neutral-700);
//     --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-800);
// 
//     /* action */
//     --kern-color-action-default: var(--kern-color-white);
//     --kern-color-action-on-default: var(--kern-color-layout-background-default);
//     --kern-color-action-visited: var(--kern-color-violet-050);
// 
//     /* action-focus */
//     --kern-color-action-focus-default: var(--kern-color-neutral-300);
// 
//     /* action-state-opacity */
//     --kern-color-action-state-opacity-hover: 88%;
//     --kern-color-action-state-opacity-active: 76%;
//     --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-overlay: 0.72;
// 
//     /* action-state-indicator */
//     --kern-color-action-state-indicator-default: var(--kern-color-action-default);
//     --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
//     --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
// 
//     /* form-inputs */
//     --kern-color-form-input-border: var(--kern-color-neutral-050);
// 
//     /* feedback */
//     --kern-color-feedback-default: var(--kern-color-neutral-025);
//     --kern-color-feedback-default-background: var(--kern-color-neutral-500);
//     --kern-color-feedback-danger: var(--kern-color-red-400);
//     --kern-color-feedback-danger-background: var(--kern-color-red-900);
//     --kern-color-feedback-info: var(--kern-color-lightblue-400);
//     --kern-color-feedback-info-background: var(--kern-color-lightblue-900);
//     --kern-color-feedback-success: var(--kern-color-turquois-400);
//     --kern-color-feedback-success-background: var(--kern-color-turquois-900);
//     --kern-color-feedback-warning: var(--kern-color-orange-400);
//     --kern-color-feedback-warning-background: var(--kern-color-orange-900);
// 
//     /* decorative-brand */
//     --kern-color-decorative-brand-default: var(--kern-color-white);
// 
//     /* decorative-border */
//     --kern-color-decorative-border-default: var(--kern-color-neutral-500);
//     --kern-color-decorative-border-level-1: var(--kern-color-neutral-500);
//     --kern-color-decorative-border-level-2: var(--kern-color-neutral-500);
// 
// 
// 
//     // TODO: Wird noch benutzt, kann eventuell weg!!!
//     /* layout-background */
//     --kern-color-layout-background-inverted: var(--kern-color-white);
//     --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
// 
//     /* form-inputs */
//     --kern-color-form-input-background: var(--kern-color-neutral-900);
// 
//     // 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)));
// 
//     // 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 accent-dark-colors {
//     /* layout */
//     --kern-color-layout-border: var(--kern-color-darkblue-200);
//     --kern-color-layout-border-level-1: var(--kern-color-darkblue-200);
//     --kern-color-layout-border-level-2: var(--kern-color-darkblue-200);
// 
//     /* layout-text */
//     --kern-color-layout-text-default: var(--kern-color-white);
//     --kern-color-layout-text-muted: var(--kern-color-neutral-150);
//     --kern-color-layout-text-inverse: var(--kern-color-neutral-950);
// 
//     /* layout-background */
//     --kern-color-layout-background-default: var(--kern-color-neutral-700);
//     --kern-color-layout-background-hued: var(--kern-color-neutral-800);
//     --kern-color-layout-background-default-surface: var(--kern-color-neutral-800);
//     --kern-color-layout-background-level-1: var(--kern-color-neutral-700);
//     --kern-color-layout-background-level-1-surface: var(--kern-color-neutral-800);
//     --kern-color-layout-background-level-2: var(--kern-color-neutral-700);
//     --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-800);
// 
//     /* action */
//     --kern-color-action-default: var(--kern-color-white);
//     --kern-color-action-on-default: var(--kern-color-layout-background-default);
//     --kern-color-action-visited: var(--kern-color-violet-050);
// 
//     /* action-focus */
//     --kern-color-action-focus-default: var(--kern-color-neutral-300);
// 
//     /* action-state-opacity */
//     --kern-color-action-state-opacity-hover: 88%;
//     --kern-color-action-state-opacity-active: 76%;
//     --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-overlay: 0.72;
// 
//     /* action-state-indicator */
//     --kern-color-action-state-indicator-default: var(--kern-color-action-default);
//     --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default);
//     --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default);
// 
//     /* form-inputs */
//     --kern-color-form-input-border: var(--kern-color-neutral-050);
// 
//     /* feedback */
//     --kern-color-feedback-default: var(--kern-color-neutral-025);
//     --kern-color-feedback-default-background: var(--kern-color-neutral-500);
//     --kern-color-feedback-danger: var(--kern-color-red-400);
//     --kern-color-feedback-danger-background: var(--kern-color-red-900);
//     --kern-color-feedback-info: var(--kern-color-lightblue-400);
//     --kern-color-feedback-info-background: var(--kern-color-lightblue-900);
//     --kern-color-feedback-success: var(--kern-color-turquois-400);
//     --kern-color-feedback-success-background: var(--kern-color-turquois-900);
//     --kern-color-feedback-warning: var(--kern-color-orange-400);
//     --kern-color-feedback-warning-background: var(--kern-color-orange-900);
// 
//     /* decorative-brand */
//     --kern-color-decorative-brand-default: var(--kern-color-white);
// 
//     /* decorative-border */
//     --kern-color-decorative-border-default: var(--kern-color-neutral-500);
//     --kern-color-decorative-border-level-1: var(--kern-color-neutral-500);
//     --kern-color-decorative-border-level-2: var(--kern-color-neutral-500);
// 
// 
// 
//     // TODO: Wird noch benutzt, kann eventuell weg!!!
//     /* layout-background */
//     --kern-color-layout-background-inverted: var(--kern-color-white);
//     --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); // opacity // INFO: Excluded from Theming
// 
//     /* form-inputs */
//     --kern-color-form-input-background: var(--kern-color-neutral-900);
// 
//     // 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)));
// 
//     // 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;
    }
// 
//     .kern-accent {
//         @include accent-dark-colors;
//     }
}

@media (prefers-color-scheme: light) {
    :root {
        @include light-colors;
    }
// 
//     .kern-accent {
//         @include accent-light-colors;
//     }
}

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

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

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