$extension-width: 360px;
$extension-height: 600px;
$phone-width: 480px;

$border-radius-app: 10px;
$border-radius-interactive: 10px;
$border-radius-modal: 16px;
$border-radius-card: 16px;

$base-font-size: 16px;
$font-sans: 'IBM Plex Sans', sans-serif;
$font-mono: 'IBM Plex Mono';

$z-index-header: 2;
$z-index-modal: $z-index-header + 2;
$z-index-placeholder: $z-index-modal + 1;
$z-index-login-modal: $z-index-placeholder + 1;
$z-index-loader: $z-index-modal - 1; // Modals should always be above the loader
$z-index-back-to-top: $z-index-modal + 1;

$bg-blur-radius: 4px;

$color-white: #fff;
$color-white-rgb: 255, 255, 255;
$color-black: #000;
$color-primary: #1161fe;
$color-primary-hover: #0e52d8;
$color-secondary: #ff2b5e;
$color-grey-light: #babac0;
$color-grey-medium: #373737;
$color-grey-dark: #787878;
$color-grey-border: #444;
$color-grey-border-avatar: #9e9e9e;
$color-purple: #8f00ff;

$color-dialog: #2b2b2b;

$color-border: #232323;
$color-border-hover: #2f2f2f;

$color-bg-body: #0b0b0b;
$color-bg-1: #131313;
$color-bg-1-hover: #090909;
$color-bg-2: #171717;
$color-bg-3: #282828;
$color-bg-4: #191919;
$color-bg-4-hover: #121212;
$color-bg-6: #262626;

$color-disabled: #212121;

$color-success: #00ff9d;
$color-success-dark: #00d3a1;
$color-success-hover: #00dc87;
$color-warning: #ffb422;
$color-danger: #ff4746;

$color-bg-app: #141414;
$color-bg-modal: $color-bg-4;

$color-scrollbar-thumb: rgba($color-white, 0.15);

// Transition properties for clickable elements like buttons
$transition-interactive: all 150ms;
