:root {

    --base-font-family: -apple-system, BlinkMacSystemFont, "Inter var", Inter, Lato, Roboto, system-ui, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;

    --head-font-family: -apple-system, BlinkMacSystemFont, "Inter Display var", "Inter Display", "Inter var", Inter, Lato, Roboto, system-ui, "Helvetica Neue", HelveticaNeue,Helvetica, Arial, sans-serif;

    --mono-font-family: "SFMono-Regular", "JetBrains Mono Var", "JetBrains Mono", "Roboto Mono", "Inconsolata", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Consolas", Courier, "Courier New", monospace;

    --base-font-size: 16px;
    --base-line-height: 1.5;

    --base-font-weight: 400;
    --head-font-weight: 650;

    // !default
    --d-text-color: hsl( 0, 0%, 99% );
    --d-text-color-i: hsl( 0, 0%, 7% );
    --l-text-color: hsl( 0, 0%, 7% );
    --l-text-color-i: hsl( 0, 0%, 99% );

    // lighten, 18%
    --d-lighten-text-color: hsl( 0, 0%, 97% );
    --d-lighten-text-color-i: hsl( 0, 0%, 10% );
    --l-lighten-text-color: hsl( 0, 0%, 10% );
    --l-lighten-text-color-i: hsl( 0, 0%, 97% );

    // !default
    --d-darken-text-color: hsl( 0, 0%, 100% );
    --d-darken-text-color-i: hsl( 0, 0%, 0% );
    --l-darken-text-color: hsl( 0, 0%, 0% );
    --l-darken-text-color-i: hsl( 0, 0%, 100% );

    // !default
    --d-background-color: hsl( 0, 0%, 9% );
    --d-background-color-i: hsl( 0, 0%, 99% );
    --l-background-color: hsl( 0, 0%, 99% );
    --l-background-color-i: hsl( 0, 0%, 9% );

    // !default
    --d-background-color-lighten: hsl(0, 0%, 13%);
    --d-background-color-lighten-i: hsl(0, 0%, 95%);
    --l-background-color-lighten: hsl(0, 0%, 95%);
    --l-background-color-lighten-i: hsl(0, 0%, 13%);

    // !default
    --d-background-color-light: hsl(0, 0%, 20%);
    --d-background-color-light-i: hsl(0, 0%, 88%);
    --l-background-color-light: hsl(0, 0%, 88%);
    --l-background-color-light-i: hsl(0, 0%, 20%);

    // !default
    --d-background-color-opacity-90: hsla(0, 0%, 9%, 0.90);
    --d-background-color-opacity-90-i: hsl(0, 0%, 99%, 0.90);
    --l-background-color-opacity-90: hsl(0, 0%, 99%, 0.90);
    --l-background-color-opacity-90-i: hsla(0, 0%, 9%, 0.90);

    --d-background-color-opacity-75: hsla(0, 0%, 9%, 0.75);
    --d-background-color-opacity-75-i: hsl(0, 0%, 99%, 0.75);
    --l-background-color-opacity-75: hsl(0, 0%, 99%, 0.75);
    --l-background-color-opacity-75-i: hsla(0, 0%, 9%, 0.75);

    --d-background-color-opacity-60: hsla(0, 0%, 9%, 0.60);
    --d-background-color-opacity-60-i: hsl(0, 0%, 99%, 0.60);
    --l-background-color-opacity-60: hsl(0, 0%, 99%, 0.60);
    --l-background-color-opacity-60-i: hsla(0, 0%, 9%, 0.60);

    --d-background-color-opacity-45: hsla(0, 0%, 9%, 0.45);
    --d-background-color-opacity-45-i: hsl(0, 0%, 99%, 0.45);
    --l-background-color-opacity-45: hsl(0, 0%, 99%, 0.45);
    --l-background-color-opacity-45-i: hsla(0, 0%, 9%, 0.45);
    
    --d-background-color-opacity-30: hsla(0, 0%, 9%, 0.30);
    --d-background-color-opacity-30-i: hsl(0, 0%, 99%, 0.30);
    --l-background-color-opacity-30: hsl(0, 0%, 99%, 0.30);
    --l-background-color-opacity-30-i: hsla(0, 0%, 9%, 0.30);

    --d-background-color-opacity-15: hsla(0, 0%, 9%, 0.15);
    --d-background-color-opacity-15-i: hsl(0, 0%, 99%, 0.15);
    --l-background-color-opacity-15: hsl(0, 0%, 99%, 0.15);
    --l-background-color-opacity-15-i: hsla(0, 0%, 9%, 0.15);

    // !default
    --d-item-background-color: hsl(0, 0%, 16%);
    --d-item-background-color-i: hsl(0, 0%, 92%);
    --l-item-background-color: hsl(0, 0%, 92%);
    --l-item-background-color-i: hsl(0, 0%, 16%);

    // Border Color
    --d-border-color: hsl(0, 0%, 20%);
    --d-border-color-i: hsl(0, 0%, 80%);
    --l-border-color: hsl(0, 0%, 80%);
    --l-border-color-i: hsl(0, 0%, 20%);

    --d-border-color-lighten: hsl(0, 0%, 25%);
    --d-border-color-lighten-i: hsl(0, 0%, 75%);
    --l-border-color-lighten: hsl(0, 0%, 75%);
    --l-border-color-lighten-i: hsl(0, 0%, 25%);

    --d-border-color-light: hsl(0, 0%, 30%);
    --d-border-color-light-i: hsl(0, 0%, 70%);
    --l-border-color-light: hsl(0, 0%, 70%);
    --l-border-color-light-i: hsl(0, 0%, 30%);

    // !default
    --d-brand-color: #2483ff;
    --l-brand-color: #16c;

    // !default
    --d-visited-color: #2483ff;
    --l-visited-color: #16c;

    --background-radius: .35rem;
    --border-radius: .35rem;

    --size-unit: 4rem;

    --spacing-unit: 4rem;
    --half-spacing-unit: calc(var(--spacing-unit) / 2);
    --quarter-spacing-unit: calc(var(--spacing-unit) / 4);
    --sub-spacing-unit: calc(var(--quarter-spacing-unit) / 1.5);

    --transition-timing-std: 400ms;
    --transition-function-std: ease-in-out;
}


@media (prefers-color-scheme: dark) {
    :root {
        --text-color: var(--d-text-color);
        --text-color-i: var(--d-text-color-i);
        --lighten-text-color: var(--d-lighten-text-color);
        --lighten-text-color-i: var(--d-lighten-text-color-i);
        --darken-text-color: var(--d-darken-text-color);
        --darken-text-color-i: var(--d-darken-text-color-i);
        --background-color: var(--d-background-color);
        --background-color-i: var(--d-background-color-i);
        --background-color-lighten: var(--d-background-color-lighten);
        --background-color-lighten-i: var(--d-background-color-lighten-i);
        --background-color-light: var(--d-background-color-light);
        --background-color-light-i: var(--d-background-color-light-i);
        --background-color-opacity-90: var(--d-background-color-opacity-90);
        --background-color-opacity-90-i: var(--d-background-color-opacity-90-i);
        --background-color-opacity-75: var(--d-background-color-opacity-75);
        --background-color-opacity-75-i: var(--d-background-color-opacity-75-i);
        --background-color-opacity-60: var(--d-background-color-opacity-60);
        --background-color-opacity-60-i: var(--d-background-color-opacity-60-i);
        --background-color-opacity-45: var(--d-background-color-opacity-45);
        --background-color-opacity-45-i: var(--d-background-color-opacity-45-i);
        --background-color-opacity-30: var(--d-background-color-opacity-30);
        --background-color-opacity-30-i: var(--d-background-color-opacity-30-i);
        --background-color-opacity-15: var(--d-background-color-opacity-15);
        --background-color-opacity-15-i: var(--d-background-color-opacity-15-i);
        --item-background-color: var(--d-item-background-color);
        --item-background-color-i: var(--d-item-background-color-i);
        --border-color: var(--d-border-color);
        --border-color-i: var(--d-border-color-i);
        --border-color-lighten: var(--d-border-color-lighten);
        --border-color-lighten-i: var(--d-border-color-lighten-i);
        --border-color-light: var(--d-border-color-light);
        --border-color-light-i: var(--d-border-color-light-i);
        --brand-color: var(--d-brand-color);
        --visited-color: var(--d-visited-color);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color: var(--l-text-color);
        --text-color-i: var(--l-text-color-i);
        --lighten-text-color: var(--l-lighten-text-color);
        --lighten-text-color-i: var(--l-lighten-text-color-i);
        --darken-text-color: var(--l-darken-text-color);
        --darken-text-color-i: var(--l-darken-text-color-i);
        --background-color: var(--l-background-color);
        --background-color-i: var(--l-background-color-i);
        --background-color-lighten: var(--l-background-color-lighten);
        --background-color-lighten-i: var(--l-background-color-lighten-i);
        --background-color-light: var(--l-background-color-light);
        --background-color-light-i: var(--l-background-color-light-i);
        --background-color-opacity-90: var(--l-background-color-opacity-90);
        --background-color-opacity-90-i: var(--l-background-color-opacity-90-i);
        --background-color-opacity-75: var(--l-background-color-opacity-75);
        --background-color-opacity-75-i: var(--l-background-color-opacity-75-i);
        --background-color-opacity-60: var(--l-background-color-opacity-60);
        --background-color-opacity-60-i: var(--l-background-color-opacity-60-i);
        --background-color-opacity-45: var(--l-background-color-opacity-45);
        --background-color-opacity-45-i: var(--l-background-color-opacity-45-i);
        --background-color-opacity-30: var(--l-background-color-opacity-30);
        --background-color-opacity-30-i: var(--l-background-color-opacity-30-i);
        --background-color-opacity-15: var(--l-background-color-opacity-15);
        --background-color-opacity-15-i: var(--l-background-color-opacity-15-i);
        --item-background-color: var(--l-item-background-color);
        --item-background-color-i: var(--l-item-background-color-i);
        --border-color: var(--l-border-color);
        --border-color-i: var(--l-border-color-i);
        --border-color-lighten: var(--l-border-color-lighten);
        --border-color-lighten-i: var(--l-border-color-lighten-i);
        --border-color-light: var(--l-border-color-light);
        --border-color-light-i: var(--l-border-color-light-i);
        --brand-color: var(--l-brand-color);
        --visited-color: var(--l-visited-color);
    }
}



@media (max-width: var(--mobile)) {
    :root {
        --spacing-unit: 2rem;
        --half-spacing-unit: calc(var(--spacing-unit) / 2);
        --quarter-spacing-unit: calc(var(--spacing-unit) / 4);
    }
}