_variables.scss

@use "sass:color";

// rosebox colors used throughout the theme
$rb-bg-primary: #262626;
$rb-bg-primarya: #262626de;
$rb-bg-secondary: #232323;
$rb-bg-secondary-d: #222222;
$rb-bg-tertiary: #212121;
$rb-bg-quarterary: #282828;
$rb-bg-4: #393939;
$rb-bg-5: #313131;
$rb-bg-slate: #19191b; // from phone wallpaper

$rb-fg-accent: #a57562;
$rb-text: #a3a5aa;
$rb-text-vibrant: #b5bac1; // more vibrant, discord's built-in --header-secondary
$rb-bg-accent: rgba(165, 117, 98, 0.2);
$rb-bg-accent1: rgba(165, 117, 98, 0.1);
$rb-bg-accent25: rgba(165, 117, 98, 0.25);
$rb-bg-accent80: rgba(165, 117, 98, 0.8);
$rb-bg-accent95: rgba(165, 117, 98, 0.95);
$rb-bg-accent-opaque: #5e4c43;
$rb-fg-accent-hover: #885f4e; // or color.adjust($rb-fg-accent, $lightness: -5%)
$rb-teal-lighter: #88a5aa;
$rb-teal-darker: #6A8F95;

// misc/util
$border-color: #333131;
$border-color-black: rgba(0,0,0,0.2);
$border-color-faint: rgba(255, 255, 255, 0.15);

// border radii
$br-small: 5px;
$br-medium: 8px; 
$br-big: 1rem;

$main-row-gap: 1.5vh;
$col-spacer: 1rem;
$bg-image-icon-size: 50%;

$btn-bg-green: hsl(139,47.3%, 43.9%);
$btn-bg-green-dark: color.adjust($btn-bg-green, $lightness: -10%);

$btn-bg-red: hsl(359, 82.6%, 59.4%);
$btn-bg-red-dark: color.adjust($btn-bg-red, $lightness: -10%);