/* ================= */ // ABSTRACTS: VARIABLES GENERAL /* ================= */ // https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss $white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5bd !default; $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; $green: #198754 !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-900 !default; $theme-colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, ), $theme-colors ); $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px, ) !default; //font-family: 'Nunito Sans', sans-serif; //font-family: 'Poppins', sans-serif; $font-family-base: "Guillon"; $headings-font-family: "Guillon", sans-serif; $font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; $font-family-monospace: "Space Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; $enable-grid-classes: false; $spacer: 1rem; $border-width: 0; $btn-border-radius: 0.25rem; $card-border-color: rgba($black, 0.0625); $card-spacer-x: 3rem; /* ================= */ // ABSTRACTS: VARIABLES LIGHT /* ================= */ html, html[data-theme="light"] { --light-text-color: hsl(0, 0%, 35%); --main-background-color: hsl(0, 5%, 95%); --main-text-color: hsl(0, 0%, 0%); } /* ================= */ // ABSTRACTS: VARIABLES DARK /* ================= */ html[data-theme="dark"] { --light-text-color: hsl(0, 0%, 60%); --main-background-color: hsl(0, 0%, 10%); --main-text-color: hsl(0, 10%, 80%); } @media (prefers-color-scheme: dark) { html { content: "dark"; } }