/*

In this file:

// A. Modules
// B. Variables
// C. Utilities
// D. Prefers Color Scheme

*/

//////////////////////////////////////////////
// A. Modules
//////////////////////////////////////////////

@use 'sass:map';
@use './breakpoint';

//////////////////////////////////////////////
// B. Variables
//////////////////////////////////////////////

:root {

    // Theme Color Palette

    --primary: #440381;
    --secondary: #ffcc66;
    --dark: #1f163f;
    --light: #f2edeb;
    --canvas: white;

    // Primary Correlated Colors

    --primary-text: white;
    --primary-border: hsla(0, 0%, 0%, 0.25);
    --primary-link: currentColor;
    --primary-confirm: #16db93;
    --primary-warn: #ff73aa;

    // Secondary Correlated Colors

    --secondary-text: var(--dark);
    --secondary-border: hsla(0, 0%, 0%, 0.25);
    --secondary-link: currentColor;
    --secondary-confirm: #41e0f2;
    --secondary-warn: #ffa3a4;

    // Dark Correlated Colors

    --dark-text: white;
    --dark-border: hsla(0, 0%, 100%, 0.125);
    --dark-link: #21b2fa;
    --dark-confirm: #00a242;
    --dark-warn: #fe3c3e;

    // Light Correlated Colors

    --light-text: var(--dark);
    --light-border: hsla(0, 0%, 50%, 0.25);
    --light-link: #0066cc;
    --light-confirm: #007e35;
    --light-warn: #ce1736;

    // Canvas Correlated Colors

    --canvas-text: var(--dark);
    --canvas-border: hsla(0, 0%, 50%, 0.25);
    --canvas-link: #0066cc;
    --canvas-confirm: #008237;
    --canvas-warn: #e4193c;

    // Subtle Fill Colors

    --subtle-fill-1: color-mix(in srgb, currentColor 5%, transparent);
    --subtle-fill-2: color-mix(in srgb, currentColor 10%, transparent);
}

$theme-colors: (
        
    "primary": (
        swatch: var(--primary),
        text: var(--primary-text),
        border: var(--primary-border),
        link: var(--primary-link),
        confirm: var(--primary-confirm),
        warn: var(--primary-warn)
    ), 
    
    "secondary": (
        swatch: var(--secondary),
        text: var(--secondary-text),
        border: var(--secondary-border),
        link: var(--secondary-link),
        confirm: var(--secondary-confirm),
        warn: var(--secondary-warn)
    ), 
    
    "dark": (
        swatch: var(--dark),
        text: var(--dark-text),
        border: var(--dark-border),
        link: var(--dark-link),
        confirm: var(--dark-confirm),
        warn: var(--dark-warn)
    ),
    
    "light": (
        swatch: var(--light),
        text: var(--light-text),
        border: var(--light-border),
        link: var(--light-link),
        confirm: var(--light-confirm),
        warn: var(--light-warn)
    ),

    "canvas": (
        swatch: var(--canvas),
        text: var(--canvas-text),
        border: var(--canvas-border),
        link: var(--canvas-link),
        confirm: var(--canvas-confirm),
        warn: var(--canvas-warn)
    ) 
);

//////////////////////////////////////////////
// C. Utilities 
//////////////////////////////////////////////

@layer utility {

    html:not([class*="theme-"]),
    [class*="theme-"],
    .backdrop__media__credit {

        background-color: var(--background-color);

        color: var(--text-color);
        
        border-color: var(--border-color);

        *:not(:is([class*="theme-"], [class*="border"], select, footer)) {
            border-color: var(--border-color, inherit);
        }

        :is(
            td > a, 
            .td-content > a,
            p > a:not([class*="text-color"]),
            .skip-link > a,
            .text-color-link
        ) {
            color: var(--link-color);
        }

        :is(
            select option,
            [data-toggle="dropdown"] ~ ul,
            .modal__content
        ),
        .table-scroll__container::after { 
            background-color: var(--background-color);
        }

        .alert--confirm {
            color: var(--confirm-color);
        }

        .alert--confirm--inverse {
            background-color: var(--confirm-color);

            color: var(--background-color);
        }

        :is(
            .alert--warn,
            .required-indicator [class*="icon"],
            .is-invalid .form-entry__feedback, 
            .is-invalid [class*="icon-warn"],
            .is-invalid .form-entry__option
        ),
        .form-entry__field__label::before,
        .form-entry__field__label::after,
        .is-invalid .form-entry__field__input::after,
        .is-invalid .form-entry__field__select::after { 
            color: var(--warn-color);
        }

        .alert--warn--inverse {
            background-color: var(--warn-color);

            color: var(--background-color);
        }

        :is(.active, .has-value) .form-entry__field--float .form-entry__field__label {
            background-color: var(--background-color);
        }
    }

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        @include breakpoint.breakpoint-up($breakpoint) {
            $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

            @each $name, $color-map in $theme-colors {
                $swatch: map.get($color-map, "swatch");
                $text: map.get($color-map, "text");
                $border: map.get($color-map, "border");
                $link: map.get($color-map, "link");

                $confirm: map.get($color-map, "confirm");
                $warn: map.get($color-map, "warn");

                .theme-#{$name}#{$mod} {
                    --background-color: #{$swatch};
                    --text-color: #{$text};
                    --border-color: #{$border};
                    --link-color: #{$link};
                    --confirm-color: #{$confirm};
                    --warn-color: #{$warn};
                }

                .background-color-#{$name}#{$mod}{
                    --background-color: #{$swatch};
                    background-color: var(--background-color);
                }

                .text-color-#{$name}#{$mod}{
                    --text-color: #{$swatch};
                    color: var(--text-color);
                }
            }
        }
    }

    @media (prefers-color-scheme: dark) {

        .theme-canvas--prefers {
            --background-color: var(--dark);
            --text-color: var(--dark-text);
            --border-color: var(--dark-border);
            --link-color: var(--dark-link);
            --confirm-color: var(--dark-confirm);
            --warn-color: var(--dark-warn);
        }
    }

    // Subtle Fill Utilities

    @each $breakpoint in map.keys(breakpoint.$breakpoints) {
        @include breakpoint.breakpoint-up($breakpoint) {
            $mod: breakpoint.breakpoint-modifier($breakpoint, breakpoint.$breakpoints);

            .subtle-fill-1#{$mod}{
                background-color: var(--subtle-fill-1);
            }

            .subtle-fill-2#{$mod}{
                background-color: var(--subtle-fill-2);
            }

        }
    }

} // end @layer