// Colors
$grey-hue: 205 !default;
$grey-50:  hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
$grey-300: hsl($grey-hue, 14%, 68%) !default;
$grey-400: hsl($grey-hue, 12%, 59%) !default;
$grey-500: hsl($grey-hue, 10%, 50%) !default;
$grey-600: hsl($grey-hue, 15%, 41%) !default;
$grey-700: hsl($grey-hue, 20%, 32%) !default;
$grey-800: hsl($grey-hue, 25%, 23%) !default;
$grey-900: hsl($grey-hue, 30%, 15%) !default;

$primary-hue: 195 !default;
$primary-50:  hsl($primary-hue, 90%,  94%) !default;
$primary-100: hsl($primary-hue, 88%,  86%) !default;
$primary-200: hsl($primary-hue, 86%,  77%) !default;
$primary-300: hsl($primary-hue, 84%,  68%) !default;
$primary-400: hsl($primary-hue, 82%,  59%) !default;
$primary-500: hsl($primary-hue, 80%,  50%) !default;
$primary-600: hsl($primary-hue, 85%,  41%) !default;
$primary-700: hsl($primary-hue, 90%,  32%) !default;
$primary-800: hsl($primary-hue, 95%,  23%) !default;
$primary-900: hsl($primary-hue, 100%, 15%) !default;

$black: #000 !default;
$white: #FFF !default;

$red-50:  #FFEBEE !default;
$red-100: #FFCDD2 !default;
$red-200: #EF9A9A !default;
$red-300: #E57373 !default;
$red-400: #EF5350 !default;
$red-500: #F44336 !default;
$red-600: #E53935 !default;
$red-700: #D32F2F !default;
$red-800: #C62828 !default;
$red-900: #B71C1C !default;

$green-50:  #E8F5E9 !default;
$green-100: #C8E6C9 !default;
$green-200: #A5D6A7 !default;
$green-300: #81C784 !default;
$green-400: #66BB6A !default;
$green-500: #4CAF50 !default;
$green-600: #43A047 !default;
$green-700: #388E3C !default;
$green-800: #2E7D32 !default;
$green-900: #1B5E20 !default;

// Amber
$amber-50:  #FFF8E1 !default;
$amber-100: #FFECB3 !default;
$amber-200: #FFE082 !default;
$amber-300: #FFD54F !default;
$amber-400: #FFCA28 !default;
$amber-500: #FFC107 !default;
$amber-600: #FFB300 !default;
$amber-700: #FFA000 !default;
$amber-800: #FF8F00 !default;
$amber-900: #FF6F00 !default;

:root {
    // Typography
    --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --line-height: 1.5;
    --font-weight: 400;
    --font-size: 16px;

    @if $enable-responsive-typography {
        @if map-get($breakpoints, "sm") {
            @media (min-width: map-get($breakpoints, "sm")) {
              --font-size: 17px;
            }
        }
      
        @if map-get($breakpoints, "md") {
            @media (min-width: map-get($breakpoints, "md")) {
              --font-size: 18px;
            }
        }
      
        @if map-get($breakpoints, "lg") {
            @media (min-width: map-get($breakpoints, "lg")) {
              --font-size: 19px;
            }
        }
    }

    // Border
    --border-radius: 0.25rem;
    --border-width: 1px;
    --outline-width: 3px;

    // Spacings
    --spacing: 1rem;

    // Spacing for typography
    --typography-spacing-vertical: 1.5rem;

    // Black spacing
    --block-spacing-vertical: calc(var(--spacing) * 2);
    --block-spacing-horizontal: var(--spacing);

    // Spacings .grid
    --grid-spacing-vertical: 0;
    --grid-spacing-horizontal: var(--spacing);

    // Spacings for form elements and button
    --form-element-spacing-vertical: .75rem;
    --form-element-spacing-horizontal: 1rem;

    // Transitions
    --transition: .2s ease-in-out;

    // Tooltip
    --tooltip-margin: 0.5rem;

    // Progress
    --progress-background-color: #{$grey-100};
    --progress-color: var(--primary);
    --progress-height: .5rem
}

body > header,
body > main,
body > footer,
section {
    @if map-get($breakpoints, "sm") {
        @media (min-width: map-get($breakpoints, "sm")) {
          --block-spacing-vertical: calc(var(--spacing) * 2.5);
        }
    }
  
    @if map-get($breakpoints, "md") {
        @media (min-width: map-get($breakpoints, "md")) {
          --block-spacing-vertical: calc(var(--spacing) * 3);
        }
    }
  
    @if map-get($breakpoints, "lg") {
        @media (min-width: map-get($breakpoints, "lg")) {
          --block-spacing-vertical: calc(var(--spacing) * 3.5);
        }
    }

    article {
        @if map-get($breakpoints, "sm") {
            @media (min-width: map-get($breakpoints, "sm")) {
              --block-spacing-horizontal: calc(var(--spacing) * 1.25);
            }
        }
      
        @if map-get($breakpoints, "md") {
            @media (min-width: map-get($breakpoints, "md")) {
              --block-spacing-horizontal: calc(var(--spacing) * 1.5);
            }
        }
      
        @if map-get($breakpoints, "lg") {
            @media (min-width: map-get($breakpoints, "lg")) {
              --block-spacing-horizontal: calc(var(--spacing) * 1.75);
            }
        }
    }
}

a {
    --text-decoration: none;

    &[style="secondary"] {
        --text-decoration: underline;
    }
}

small {
    --font-size: 0.875em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --font-weight: 700;
}

h1 {
    --font-size: 2rem;
    --typography-spacing-vertical: 3rem;
}
  
h2 {
    --font-size: 1.75rem;
    --typography-spacing-vertical: 2.625rem;
}
  
h3 {
    --font-size: 1.5rem;
    --typography-spacing-vertical: 2.25rem;
}
  
h4 {
    --font-size: 1.25rem;
    --typography-spacing-vertical: 1.874rem;
}
  
h5 {
    --font-size: 1.125rem;
    --typography-spacing-vertical: 1.6875rem;
}

[type="checkbox"],
[type="radio"] {
    --border-width: 2px;
}

table {
    thead {
        th,
        td {
            --border-width: 3px;
        }
    }

    :not(thead) td {
        --font-size: 0.875em;
    }
}

pre,
code,
kbd,
samp {
    --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
    --font-weight: bolder;
}

[data-theme="dark"],
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --background-color: #{mix($black, $grey-900, 37.5%)};

    // Texts colors
    --color: #{$grey-200};
    --h1-color: #{$grey-50};
    --h2-color: #{mix($grey-100, $grey-50)};
    --h3-color: #{$grey-100};
    --h4-color: #{mix($grey-200, $grey-100)};
    --h5-color: #{$grey-200};
    --h6-color: #{mix($grey-300, $grey-200)};

    // Muted colors
    --muted-color: #{$grey-500};
    --muted-border-color: #{mix($grey-900, $grey-800, 75%)};

    // Primary colors
    --primary: #{$primary-600};
    --primary-hover: #{$primary-500};
    --primary-focus: #{rgba($primary-600, .25)};
    --primary-inverse: #{$white};

    // Secondary colors
    --secondary: #{$grey-600};
    --secondary-hover: #{$grey-500};
    --secondary-focus: #{rgba($grey-500, .25)};
    --secondary-inverse: #{$white};

    // Blockquote
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);

    // Button
    --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    // Form elements
    --form-element-background-color: #{mix($black, $grey-900, 37.5%)};
    --form-element-border-color: #{mix($grey-800, $grey-700)};
    --form-element-color: var(--color);
    --form-element-placeholder-color: var(--muted-color);
    --form-element-active-background-color: var(--form-element-background-color);
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #{$grey-800};
    --form-element-disabled-border-color: #{$grey-700};
    --form-element-disabled-opacity: .5;
    --form-element-invalid-border-color: #{$red-900};
    --form-element-invalid-active-border-color: #{$red-800};
    --form-element-valid-border-color: #{$green-800};
    --form-element-valid-active-border-color: #{$green-700};

    // Switch
    --switch-background-color: #{mix($grey-800, $grey-700)};
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);

    // Range
    --range-border-color: #{mix($grey-900, $grey-800)};
    --range-active-border-color: #{$grey-800};
    --range-thumb-border-color: var(--background-color);
    --range-thumb-color: var(--secondary);
    --range-thumb-hover-color: var(--secondary-hover);
    --range-thumb-active-color: var(--primary);

    // Table
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color: #{rgba($grey-500, .05)};

    // Code
    --code-background-color: #{mix($black, $grey-900, 12.5%)};
    --code-color: var(--muted-color);
    --code-kbd-background-color: var(--contrast);
    --code-kbd-color: var(--contrast-inverse);
    --code-tag-color: #{hsl(330, 30%, 50%)};
    --code-property-color: #{hsl(185, 30%, 50%)};
    --code-value-color: #{hsl(40,  10%, 50%)};
    --code-comment-color: #{mix($grey-700, $grey-600)};

    // Accordion
    --accordion-border-color: var(--muted-border-color);
    --accordion-active-summary-color: var(--primary);
    --accordion-close-summary-color: var(--color);
    --accordion-open-summary-color: var(--muted-color);

    // Card
    --card-background-color: #{mix($black, $grey-900, 25%)};
    --card-border-color: #{mix($black, $grey-900, 37.5%)};
    --card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
    --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};

    // Spinner
    --spinner-margin: 0.5rem;
    --spinner-border-color: #ddd;
    --spinner-border-left-color: var(--primary);
    --spinner-secondary: var(--secondary);

    // Progress
    --progress-background-color: #{mix($grey-900, $grey-800)};
    --progress-color: var(--primary);

    // Highlighted text (<mark>)
    --mark-background-color: #{mix($grey-300, $amber-300)};
    --mark-color: #{mix($black, $grey-900, 37.5%)};

    // Blockquote
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);

    // Icons
    --icon-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-date:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --icon-time:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-search:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-minus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --icon-valid:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-800, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-invalid:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
    color-scheme: light;
    --background-color: #{$white};

    // Texts colors
    --color: #{$grey-700};
    --h1-color: #{$grey-900};
    --h2-color: #{mix($grey-900, $grey-800)};
    --h3-color: #{$grey-800};
    --h4-color: #{mix($grey-800, $grey-700)};
    --h5-color: #{$grey-700};
    --h6-color: #{mix($grey-700, $grey-600)};

    // Muted colors
    --muted-color: #{$grey-500};
    --muted-border-color: #{$grey-50};

    // Primary colors
    --primary: #{$primary-600};
    --primary-hover: #{$primary-700};
    --primary-focus: #{rgba($primary-600, .125)};
    --primary-inverse: #{$white};

    // Secondary colors
    --secondary: #{$grey-600};
    --secondary-hover: #{$grey-700};
    --secondary-focus: #{rgba($grey-600, .125)};
    --secondary-inverse: #{$white};

    // Blockquote
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);

    // Buttons
    --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    // Form elements
    --form-element-background-color: transparent;
    --form-element-border-color: #{$grey-300};
    --form-element-color: var(--color);
    --form-element-placeholder-color: var(--muted-color);
    --form-element-active-background-color: transparent;
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --form-element-disabled-background-color: #{$grey-100};
    --form-element-disabled-border-color: #{$grey-300};
    --form-element-disabled-opacity: .5;
    --form-element-invalid-border-color: #{$red-800};
    --form-element-invalid-active-border-color: #{$red-900};
    --form-element-valid-border-color: #{$green-700};
    --form-element-valid-active-border-color: #{$green-800};

    // Switch
    --switch-background-color: #{$grey-200};
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);

    // Range
    --range-border-color: #{$grey-100};
    --range-active-border-color: #{$grey-200};
    --range-thumb-border-color: var(--background-color);
    --range-thumb-color: var(--secondary);
    --range-thumb-hover-color: var(--secondary-hover);
    --range-thumb-active-color: var(--primary);

    // Table
    --table-border-color: var(--muted-border-color);
    --table-row-stripped-background-color:#{mix($grey-50, $white)};

    // Code
    --code-background-color: #{$grey-50};
    --code-color: var(--muted-color);
    --code-kbd-background-color: var(--contrast);
    --code-kbd-color: var(--contrast-inverse);
    --code-tag-color: #{hsl(330, 40%, 50%)};
    --code-property-color: #{hsl(185, 40%, 40%)};
    --code-value-color: #{hsl(40,  20%, 50%)};
    --code-comment-color: #{$grey-300};

    // Accordion
    --accordion-border-color: var(--muted-border-color);
    --accordion-close-summary-color: var(--color);
    --accordion-open-summary-color: var(--muted-color);

    // Card
    --card-background-color: var(--background-color);
    --card-border-color: var(--muted-border-color);
    --card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
    --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};

    // Spinner
    --spinner-margin: 0.5rem;
    --spinner-border-color: #ddd;
    --spinner-border-left-color: var(--primary);
    --spinner-secondary: var(--secondary);

    // Progress
    --progress-background-color: #{$grey-100};
    --progress-color: var(--primary);

    // Highlighted text (<mark>)
    --mark-background-color: #{mix($amber-100, $amber-50)};
    --mark-color: #{mix($grey-900, $amber-900, 75%)};

    // Blockquote
    --blockquote-border-color: var(--muted-border-color);
    --blockquote-footer-color: var(--muted-color);

    // Icons
    --icon-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-date:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --icon-time:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-search:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-minus:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --icon-valid:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-700, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-invalid:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
}