/* ============================================================================
   04-ELEMENTS -> #CUSTOM-PROPERTIES
   ========================================================================= */

/**
 * Sets CSS variables (custom properties) to be used globally throughout the
 * project.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools/mixins/generate-custom-properties' as *;
@use '../02-tools/mixins/media-breakpoint' as *;


:root {
    //
    // Global
    //

    @include generate-custom-properties($color, 'color');
    @include generate-custom-properties($font-weight, 'font-weight');
    @include generate-custom-properties($border-radius, 'rounded');
    @include generate-custom-properties($shadow, 'shadow');
    @include generate-custom-properties($spacing, 'space');
    @include generate-custom-properties($transition-duration, 'duration');
    @include generate-custom-properties($z-index, 'z-index');
     
    --border-width: 1px;
    --grid-gutter-x: var(--space-6);
    --grid-gutter-y: 0;
    
    //
    // Components
    //

    // Card
    --card-padding-x: var(--space-4);
    --card-padding-y: var(--space-5);

    @include media-breakpoint-up('lg') {
        --card-padding-x: var(--space-5);
        --card-padding-y: var(--space-5);
    }

    // Icons
    --icon-size-xs: var(--space-3);
    --icon-size-sm: var(--space-4);
    --icon-size-md: var(--space-5);
    --icon-size-lg: var(--space-6);
    --icon-size-xl: var(--space-8);
          
    // Focus states
    --focus-ring-width: .25rem;
    --focus-ring-colour: var(--color-primary-100);


    // Forms
    --form-input-border-radius: var(--rounded-md);
    --form-input-border-width: var(--border-width);
    --form-input-focus-ring-width: var(--space-1);
    --form-input-height: var(--space-11);
    --form-input-shadow: var(--shadow-xs);
    --form-input-padding-x: var(--space-3);
    --form-input-padding-y: var(--space-2);
    --form-label-font-weight: var(--font-weight-medium);


    // Sidebar
    --sidebar-width: 20rem;


    //
    // Light mode specific styles
    //

    &[data-theme=light] {
        // Backgrounds
        --bg-primary: var(--color-gray-25);
        --bg-secondary: var(--color-white);
        --bg-tertiary: var(--color-gray-100);
        --bg-highlight: var(--color-primary-25);
        --bg-overlay: rgba(16, 24, 40, 0.75);


        // Primary button
        --button-primary-bg: var(--color-primary-600);
        --button-primary-color: var(--color-white);
        --button-primary-border-color: var(--color-primary-600);
        --button-primary-hover-bg: var(--color-primary-700);
        --button-primary-hover-border-color: var(--color-primary-700);
        --button-primary-hover-color: var(--color-white);
        --button-primary-active-bg: var(--color-primary-700);
        --button-primary-active-border-color: var(--color-primary-700);
        --button-primary-active-color: var(--color-white);
        --button-primary-disabled-bg: var(--color-primary-200);
        --button-primary-disabled-border-color: var(--color-primary-200);
        --button-primary-disabled-color: var(--color-white);
        --button-primary-focus-ring-color: var(--color-primary-100);

        
        // Primary muted button
        --button-primary-muted-bg: var(--color-primary-50);
        --button-primary-muted-color: var(--color-primary-700);
        --button-primary-muted-border-color: var(--color-primary-50);
        --button-primary-muted-hover-bg: var(--color-primary-100);
        --button-primary-muted-hover-border-color: var(--color-primary-100);
        --button-primary-muted-hover-color: var(--color-primary-700);
        --button-primary-muted-active-bg: var(--color-primary-100);
        --button-primary-muted-active-border-color: var(--color-primary-100);
        --button-primary-muted-active-color: var(--color-primary-700);
        --button-primary-muted-disabled-bg: var(--color-primary-25);
        --button-primary-muted-disabled-border-color: var(--color-primary-25);
        --button-primary-muted-disabled-color: var(--color-primary-300);
        --button-primary-muted-focus-ring-color: var(--color-primary-100);

        
        // Secondary button
        --button-secondary-bg: var(--color-white);
        --button-secondary-color: var(--color-gray-700);
        --button-secondary-border-color: var(--color-gray-300);
        --button-secondary-hover-bg: var(--color-gray-50);
        --button-secondary-hover-border-color: var(--color-gray-300);
        --button-secondary-hover-color: var(--color-gray-700);
        --button-secondary-active-bg: var(--color-gray-50);
        --button-secondary-active-border-color: var(--color-gray-300);
        --button-secondary-active-color: var(--color-gray-700);
        --button-secondary-disabled-bg: var(--color-white);
        --button-secondary-disabled-border-color: var(--color-gray-200);
        --button-secondary-disabled-color: var(--color-gray-300);
        --button-secondary-focus-ring-color: var(--color-gray-100);


        // Error button
        --button-error-bg: var(--color-error-600);
        --button-error-color: var(--color-white);
        --button-error-border-color: var(--color-error-600);
        --button-error-hover-bg: var(--color-error-700);
        --button-error-hover-border-color: var(--color-error-700);
        --button-error-hover-color: var(--color-white);
        --button-error-active-bg: var(--color-error-700);
        --button-error-active-border-color: var(--color-error-700);
        --button-error-active-color: var(--color-white);
        --button-error-disabled-bg: var(--color-error-200);
        --button-error-disabled-border-color: var(--color-error-200);
        --button-error-disabled-color: var(--color-white);
        --button-error-focus-ring-color: var(--color-error-100);


        // Success button
        --button-success-bg: var(--color-success-600);
        --button-success-color: var(--color-white);
        --button-success-border-color: var(--color-success-600);
        --button-success-hover-bg: var(--color-success-700);
        --button-success-hover-border-color: var(--color-success-700);
        --button-success-hover-color: var(--color-white);
        --button-success-active-bg: var(--color-success-700);
        --button-success-active-border-color: var(--color-success-700);
        --button-success-active-color: var(--color-white);
        --button-success-disabled-bg: var(--color-success-200);
        --button-success-disabled-border-color: var(--color-success-200);
        --button-success-disabled-color: var(--color-white);
        --button-success-focus-ring-color: var(--color-success-100);

        // Borders
        --border-color-primary: var(--color-gray-300);
        --border-color-secondary: var(--color-gray-200);
        --border-color-highlight: var(--color-primary-100);

        // Text
        --text-color-primary: var(--color-gray-900);
        --text-color-secondary: var(--color-gray-700);
        --text-color-tertiary: var(--color-gray-500);

        // Links
        --link-color: var(--color-primary-700);
        --link-hover-color: var(--color-primary-700);

        // Form inputs
        --form-input-bg: var(--bg-secondary);
        --form-input-border-color: var(--border-color-primary);
        --form-input-color: var(--text-color-primary);
        --form-input-disabled-bg: var(--color-gray-50);
        --form-input-disabled-color: var(--color-gray-500);
        --form-input-focus-border-color: var(--color-gray-300);
        --form-input-focus-ring-color: var(--color-primary-100); 
        --form-input-placeholder-color: var(--color-gray-500);
        --form-label-color: var(--text-color-secondary);
        --form-option-bg: var(--color-gray-200);
        --form-option-active-bg: var(--color-primary-600);

        // Navigation
        --navigation-icon-color: var(--text-color-tertiary);
        --navigation-icon-hover-color: var(--link-color);
        --navigation-icon-active-color: var(--link-color);
        --navigation-link-color: var(--text-color-secondary);
        --navigation-link-bg: transparent;
        --navigation-link-border-color: transparent;
        --navigation-link-hover-bg: var(--bg-highlight);
        --navigation-link-hover-border-color: var(--border-color-highlight);
        --navigation-link-hover-color: var(--link-hover-color);
        --navigation-link-active-bg: var(--bg-highlight);
        --navigation-link-active-border-color: var(--border-color-highlight);
        --navigation-link-active-color: var(--link-hover-color);

        // Logo
        --logo-color: var(--color-gray-900);

        // Scrollbar
        --scrollbar-bg: var(--bg-tertiary);
        --scrollbar-thumb-bg: var(--bg-highlight);


        /**
         * Tertiary button
         */

        --tertiary-button-bg: transparent;
        --tertiary-button-color: var(--text-color-tertiary);
        --tertiary-button-border-color: transparent;
        --tertiary-button-active-bg: var(--color-white);
        --tertiary-button-disabled-bg: var(--color-white);
        --tertiary-button-disabled-color: var(--color-gray-300);
        --tertiary-button-disabled-border-color: var(--color-gray-200);
        --tertiary-button-focus-border-color: var(--color-gray-100);
        --tertiary-button-hover-bg: var(--color-white);
        --tertiary-button-hover-border-color: var(--color-gray-300);
        --tertiary-button-hover-color: var(--color-gray-700);
    }


    //
    // Dark mode specific styles
    //
    
    &[data-theme=dark] {
        // Backgrounds
        --bg-primary: var(--color-gray-alt-900);
        --bg-secondary: var(--color-gray-alt-950);
        --bg-tertiary: var(--color-gray-alt-800);
        --bg-highlight: var(--color-gray-alt-700);
        --bg-overlay: rgba(255, 255, 255, 0.6);


        // Borders
        --border-color-primary: var(--color-gray-alt-400);
        --border-color-secondary: var(--color-gray-alt-700);
        --border-color-highlight: var(--color-gray-alt-300);


        // Text
        --text-color-primary: var(--color-white);
        --text-color-secondary: var(--color-gray-alt-100);
        --text-color-tertiary: var(--color-gray-alt-200);


        // Links
        --link-color: var(--color-primary-alt-400);
        --link-hover-color: var(--primary-alt-500);


        // Form inputs
        --form-input-bg: var(--bg-tertiary);
        --form-input-border-color: var(--border-color-primary);
        --form-input-color: var(--text-color-primary);
        --form-input-disabled-bg: var(--color-gray-alt-900);
        --form-input-disabled-color: var(--color-gray-alt-200);
        --form-input-focus-border-color: var(--color-gray-alt-300);
        --form-input-focus-ring-color: var(--color-primary-alt-100); 
        --form-input-placeholder-color: var(--color-gray-alt-500);
        --form-label-color: var(--text-color-secondary);
        --form-option-bg: var(--color-gray-alt-600);
        --form-option-active-bg: var(--color-primary-alt-600);
        
        
        // Logo
        --logo-color: var(--color-white);

    
        // Tertiary button     
        --tertiary-button-bg: transparent;
        --tertiary-button-color: var(--text-color-tertiary);
        --tertiary-button-border-color: transparent;
        --tertiary-button-active-bg: var(--color-white);
        --tertiary-button-disabled-bg: var(--color-white);
        --tertiary-button-disabled-color: var(--color-gray-300);
        --tertiary-button-disabled-border-color: var(--color-gray-200);
        --tertiary-button-focus-border-color: var(--color-gray-100);
        --tertiary-button-hover-bg: var(--color-white);
        --tertiary-button-hover-border-color: var(--color-gray-300);
        --tertiary-button-hover-color: var(--color-gray-700);

        // Primary button
        --button-primary-bg: var(--color-primary-alt-600);
        --button-primary-color: var(--color-white);
        --button-primary-border-color: var(--color-primary-alt-600);
        --button-primary-hover-bg: var(--color-primary-alt-700);
        --button-primary-hover-border-color: var(--color-primary-alt-700);
        --button-primary-hover-color: var(--color-white);
        --button-primary-active-bg: var(--color-primary-alt-700);
        --button-primary-active-border-color: var(--color-primary-alt-700);
        --button-primary-active-color: var(--color-white);
        --button-primary-disabled-bg: var(--color-primary-alt-200);
        --button-primary-disabled-border-color: var(--color-primary-alt-200);
        --button-primary-disabled-color: var(--color-white);
        --button-primary-focus-ring-color: var(--color-primary-alt-100);


        // Primary muted button
        --button-primary-muted-bg: var(--color-primary-alt-800);
        --button-primary-muted-color: var(--color-primary-alt-200);
        --button-primary-muted-border-color: var(--color-primary-alt-700);
        --button-primary-muted-hover-bg: var(--color-primary-alt-900);
        --button-primary-muted-hover-border-color: var(--color-primary-alt-900);
        --button-primary-muted-hover-color: var(--color-primary-alt-200);
        --button-primary-muted-active-bg: var(--color-primary-alt-900);
        --button-primary-muted-active-border-color: var(--color-primary-alt-900);
        --button-primary-muted-active-color: var(--color-primary-alt-200);
        --button-primary-muted-disabled-bg: var(--color-primary-alt-700);
        --button-primary-muted-disabled-border-color: var(--color-primary-alt-600);
        --button-primary-muted-disabled-color: var(--color-primary-alt-100);
        --button-primary-muted-focus-ring-color: var(--color-primary-alt-200);
        

        // Secondary button
        --button-secondary-bg: var(--color-gray-alt-800);
        --button-secondary-color: var(--color-white);
        --button-secondary-border-color: var(--color-gray-alt-400);
        --button-secondary-hover-bg: var(--color-gray-alt-700);
        --button-secondary-hover-color: var(--color-white);
        --button-secondary-hover-border-color: var(--color-gray-alt-500);
        --button-secondary-active-bg: var(--color-gray-alt-700);
        --button-secondary-active-border-color: var(--color-gray-alt-700);
        --button-secondary-active-color: var(--color-white);
        --button-secondary-disabled-bg: var(--color-gray-alt-900);
        --button-secondary-disabled-border-color: var(--color-gray-alt-800);
        --button-secondary-disabled-color: var(--color-gray-alt-300);
        --button-secondary-focus-ring-color: var(--color-gray-alt-100);


        // Error button
        --button-error-bg: var(--color-error-600);
        --button-error-color: var(--color-white);
        --button-error-border-color: var(--color-error-600);
        --button-error-hover-bg: var(--color-error-700);
        --button-error-hover-border-color: var(--color-error-700);
        --button-error-hover-color: var(--color-white);
        --button-error-active-bg: var(--color-error-700);
        --button-error-active-border-color: var(--color-error-700);
        --button-error-active-color: var(--color-white);
        --button-error-disabled-bg: var(--color-error-200);
        --button-error-disabled-border-color: var(--color-error-200);
        --button-error-disabled-color: var(--color-white);
        --button-error-focus-ring-color: var(--color-error-100);


        // Success button
        --button-success-bg: var(--color-success-600);
        --button-success-color: var(--color-white);
        --button-success-border-color: var(--color-success-600);
        --button-success-hover-bg: var(--color-success-700);
        --button-success-hover-border-color: var(--color-success-700);
        --button-success-hover-color: var(--color-white);
        --button-success-active-bg: var(--color-success-700);
        --button-success-active-border-color: var(--color-success-700);
        --button-success-active-color: var(--color-white);
        --button-success-disabled-bg: var(--color-success-200);
        --button-success-disabled-border-color: var(--color-success-200);
        --button-success-disabled-color: var(--color-white);
        --button-success-focus-ring-color: var(--color-success-100);

        // Navigation
        --navigation-icon-color: var(--text-color-tertiary);
        --navigation-icon-hover-color: var(--color-gray-alt-200);
        --navigation-icon-active-color: var(--color-gray-alt-200);
        --navigation-link-color: var(--color-gray-alt-100);
        --navigation-link-bg: transparent;
        --navigation-link-border-color: transparent;
        --navigation-link-hover-bg: var(--color-gray-alt-800);
        --navigation-link-hover-border-color: var(--color-gray-alt-700);
        --navigation-link-hover-color: var(--link-hover-color);
        --navigation-link-active-bg: var(--color-gray-alt-800);
        --navigation-link-active-border-color: var(--color-gray-alt-700);
        --navigation-link-active-color: var(--link-hover-color);
    }
}