PronounsPage/assets/variables.scss

@use "sass:list";
@use "sass:math";

$font-fallback: sans-serif, "Noto Color Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-sans-serif: list.join(var(--font-text), $font-fallback);
$headings-font-family: list.join(var(--font-headings), $font-fallback);
$btn-font-family: $font-family-sans-serif;
$font-family-base: $font-family-sans-serif;

$primary: #C71585;
$body-color: #000;
$alert-border-level: -3;

$link-decoration: none;
$link-hover-decoration: underline;

$header-height: 80px;
$header-margin: $header-height + 36px;

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1500px
);
$container-width: 920px;
$container-wide-width: 1300px;
$aside-width: 332px;

$modal-backdrop-opacity: .1;

$glass-blur: 12px;
$glass-blur-sm: $glass-blur / 2;

$wide-escape-size: 6rem;

$square-button-size: 2.2rem;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/utilities";

@import '~@fortawesome/fontawesome-pro/scss/variables';

$primary-dark: #ff63cb;

$colours: (
    'pink':   ('light': $primary,    'dark': $primary-dark),
    'red':    ('light': $red-600,    'dark': $red-400),
    'orange': ('light': $orange-600, 'dark': $orange-300),
    'brown':  ('light': $orange-800, 'dark': $orange-500),
    'yellow': ('light': $yellow-600, 'dark': $yellow-300),
    'green':  ('light': $green,      'dark': $green-300),
    'teal':   ('light': $teal-700,   'dark': $teal-300),
    'blue':   ('light': $blue-700,   'dark': $blue-200),
    'purple': ('light': $purple,     'dark': $purple-300),
    'grey':   ('light': $gray-600,   'dark': $gray-500),
    'default':('light': $body-color, 'dark': $light),
);