// Colors
$primary:           #0D6EFD !default;
$secondary:         #6c757d !default;
$danger:            #dc3545 !default;
$warning:           #FFC109 !default;
$success:           #1A8754 !default;
$info:              #11CAF0 !default;
$light:             #F8F9FA !default;
$dark:              #212529 !default;
$magenta:           #D5008F !default;
$lime-green:        #A4FF00 !default;
$sky:               #7CC8E5 !default;
$amber:             #FFB84C !default;
$mint-green:        #A8E6CF !default;
$sea-green:         #2E8B57 !default;
$lavender:          #B497BD !default;
$pastel-rose:       #F9E1E4 !default;
$dark-navy:         #1A1A2E !default;
$tomato:            #FF6347 !default;
$golden-yellow:     #FFD700 !default;
$desert-sand:       #C2B280 !default;
$disabled-color:    #c8cacb !default;
$placeholder-color: #858E96 !default;

$darken-screen-bg-color: rgba($dark, 0.7) !default;
$close-btn-color:        rgba($dark, 0.7) !default;

// Base color palette (e.g. red, blue, white, black)
$base-color-palette: (
    "red": #ff0000,
    "blue": #0000ff,
    "green": #008000,
    "yellow": #ffff00,
    "orange": #ffa500,
    "purple": #800080,
    "pink": #ffc0cb,
    "brown": #964B00,
    "gray": #808080,
) !default;


// Theme color palette
$theme-color-palette: (
    "primary": $primary,
    "secondary": $secondary,
    "danger": $danger,
    "warning": $warning,
    "success": $success,
    "info": $info,
    "light": $light,
    "dark": $dark,
    "lime-green": $lime-green,
    "magenta": $magenta,
    "sky": $sky,
    "amber": $amber,
    "mint-green": $mint-green,
    "sea-green": $sea-green,
    "lavender": $lavender,
    "pastel-rose": $pastel-rose,
    "dark-navy": $dark-navy,
    "tomato": $tomato,
    "golden-yellow": $golden-yellow,
    "desert-sand": $desert-sand,
    "white":  #ffffff,
    "black":  #000000,
    "transparent": transparent,
) !default;


// Spacing
$base-padding:          0.75rem !default;
$base-margin:           0.75rem !default;

$spacing-values: (
    "0"   : 0px,
    "1"   : 0.25rem,
    "2"   : 0.5rem,
    "3"   : 0.75rem,
    "4"   : 1rem,
    "5"   : 1.25rem,
    "6"   : 1.5rem,
    "8"   : 2rem,
    "10"  : 2.5rem,
    "12"  : 3rem,
    "16"  : 4rem,
    "20"  : 5rem,
    "24"  : 6rem,
    "32"  : 8rem,
    "40"  : 10rem,
    "48"  : 12rem,
    "56"  : 14rem,
    "64"  : 16rem,
    "auto": auto
) !default; // It is used for paddings and margins


// Dimensions
$dimensions-values: (
    // Percentage-based values
    'full': 100%,
    'half': 50%,
    'quarter': 25%,
    'third': 33.33%,
    'screen': 100vw,
    'auto': auto,

    // Rem-based values (small increments to larger ones)
    '0\\.05': 0.05rem,
    '0\\.1': 0.1rem,
    '0\\.25': 0.25rem,
    '0\\.5': 0.5rem,
    '0\\.75': 0.75rem,
    '1': 1rem,
    '1\\.25': 1.25rem,
    '1\\.5': 1.5rem,
    '1\\.75': 1.75rem,
    '2': 2rem,
    '2\\.5': 2.5rem,
    '3': 3rem,
    '3\\.5': 3.5rem,
    '4': 4rem,
    '5': 5rem,
    '6': 6rem,
    '7': 7rem,
    '8': 8rem,
    '10': 10rem,
    '12': 12rem,
    '15': 15rem,
    '20': 20rem,
    '25': 25rem,
    '30': 30rem,
    '40': 40rem,
    '50': 50rem,
    '60': 60rem,
    '75': 75rem,
    '100': 100rem,
    '150': 150rem,
) !default;


// Navbar height
$navbar-height:     50px !default;


// Borders & outlines
$base-border-sickness:      0.1rem !default;

$border-outline-widths: (
    "0": 0rem,
    "1": 0.1rem,
    "2": 0.2rem,
    "3": 0.3rem,
    "4": 0.4rem,
    "5": 0.5rem
);

$outline-offsets: (
    "0": 0rem,
    "0\\.25": 0.25rem,
    "0\\.5": 0.5rem,
    "0\\.75": 0.75rem,
    "1": 1rem,
    "1\\.25": 1.25rem,
    "1\\.5": 1.5rem,
    "1\\.75": 1.75rem,
    "2": 2rem
);

$border-outline-styles: (
    "solid": solid,
    "dashed": dashed,
    "dotted": dotted,
    "double": double,
    "hidden": hidden,
    "none": none,
);


// Border radii
$base-border-radius:        0.35rem !default;
$border-radius-values: (
    'none': 0rem,
    'default': $base-border-radius,
    'xs': 0.25rem,
    'sm': 0.5rem,
    'md': 1rem,
    'lg': 1.5rem,
    'full': 50%
) !default;


// Box shadow offsets map
$box-shadow-offsets: (
    "xs": 0.1rem,
    "sm": 0.2rem,
    "md": 0.4rem,
    "lg": 0.6rem,
    "xl": 0.8rem,
    "xxl": 1.2rem
) !default;


// Font sizes
$nav-link:         16px !default;
$font-size-values: (
    'xs': 0.75rem,
    'sm': 0.875rem,
    'base': 1rem,
    'lg': 1.125rem,
    'xl': 1.25rem,
    '2xl': 1.5rem,
    '3xl': 1.875rem,
    '4xl': 2.25rem,
    '5xl': 3rem,
    '6xl': 3.75rem,
    '7xl': 4.5rem,
    '8xl': 6rem,
    '9xl': 8rem,
) !default;


// Letter spacing
$letter-spacing-values: (
    "none": 0,
    "xs": 0.1em,
    "sm": 0.2em,
    "md": 0.3em,
    "lg": 0.4em,
    "xl": 0.5em,
    "xxl": 0.6em
) !default;


// h1, h2, h3, etc
$headings: (
    "h1": 32px,
    "h2": 28px,
    "h3": 24px,
    "h4": 20px,
    "h5": 18px,
    "h6": 16px
) !default;


// Positioning spacing values (e.g. top, bottom, left, right)
$positioning-spacing-map: (
    '0': 0,
    '0\\.5': 0.125rem,
    '1': 0.25rem,
    '1\\.5': 0.375rem,
    '2': 0.5rem,
    '2\\.5': 0.625rem,
    '3': 0.75rem,
    '3\\.5': 0.875rem,
    '4': 1rem,
    '5': 1.25rem,
    '6': 1.5rem,
    '7': 1.75rem,
    '8': 2rem,
    '9': 2.25rem,
    '10': 2.5rem,
    '11': 2.75rem,
    '12': 3rem,
    '14': 3.5rem,
    '16': 4rem,
    '20': 5rem,
    '24': 6rem,
    '28': 7rem,
    '32': 8rem,
    '36': 9rem,
    '40': 10rem,
    '44': 11rem,
    '48': 12rem,
    '52': 13rem,
    '56': 14rem,
    '60': 15rem,
    '64': 16rem,
    '72': 18rem,
    '80': 20rem,
    '96': 24rem,
    'full': 100%,
    'half': 50%,
    'quarter': 25%,
    'third': 33.33%,
    'auto': auto,
) !default;


// Define the state selectors (e.g. hover, active, focus, disabled)
$state-selectors: hover, active, focus, disabled;


// Transform styles (e.g. translate, scale, rotate, skew)
$translate-spacing-map: $positioning-spacing-map !default;

// For the transform rotate property
$rotate-degrees: (
    '0': 0deg, '15': 15deg, '30': 30deg, '45': 45deg, '60': 60deg, '75': 75deg,
    '90': 90deg, '105': 105deg, '120': 120deg, '135': 135deg, '150': 150deg, '165': 165deg,
    '180': 180deg, '195': 195deg, '210': 210deg, '225': 225deg, '240': 240deg, '255': 255deg,
    '270': 270deg, '285': 285deg, '300': 300deg, '315': 315deg, '330': 330deg, '345': 345deg
) !default;

// For the transform scale property
$scale-values: (
    '0\\.1': 0.1, '0\\.2': 0.2, '0\\.3': 0.3, '0\\.4': 0.4, '0\\.5': 0.5, '0\\.6': 0.6,
    '0\\.7': 0.7, '0\\.8': 0.8, '0\\.9': 0.9, '1': 1, '1\\.1': 1.1, '1\\.2': 1.2,
    '1\\.3': 1.3, '1\\.4': 1.4, '1\\.5': 1.5, '1\\.6': 1.6, '1\\.7': 1.7, '1\\.8': 1.8,
    '1\\.9': 1.9, '2': 2, '2\\.5': 2.5, '3': 3
) !default;

// For the transform skew property
$skew-values: (
    '0': 0deg, '1': 1deg, '2': 2deg, '3': 3deg, '6': 6deg, '12': 12deg,
    '16': 16deg, '24': 24deg, '30': 30deg, '45': 45deg, '60': 60deg, '90': 90deg
) !default;


// Transition
$base-transition-time:      300ms !default;

$transition-durations: (
    "0": 0ms, "50": 50ms, "100": 100ms, "150": 150ms, "200": 200ms, "250": 250ms, "300": 300ms, "350": 350ms,
    "400": 400ms, "450": 450ms, "500": 500ms, "550": 550ms, "600": 600ms, "650": 650ms, "700": 700ms, "750": 750ms,
    "800": 800ms, "850": 850ms, "900": 900ms, "950": 950ms, "1000": 1000ms,
    "1100": 1100ms, "1200": 1200ms, "1300": 1300ms, "1400": 1400ms, "1500": 1500ms, "1600": 1600ms, "1700": 1700ms,
    "1800": 1800ms, "1900": 1900ms, "2000": 2000ms, "2100": 2100ms, "2200": 2200ms, "2300": 2300ms, "2400": 2400ms,
    "2500": 2500ms, "2600": 2600ms, "2700": 2700ms, "2800": 2800ms, "2900": 2900ms, "3000": 3000ms
);

$transition-delays: (
    "0": 0ms, "50": 50ms, "100": 100ms, "150": 150ms, "200": 200ms, "250": 250ms, "300": 300ms, "350": 350ms,
    "400": 400ms, "450": 450ms, "500": 500ms, "550": 550ms, "600": 600ms, "650": 650ms, "700": 700ms, "750": 750ms,
    "800": 800ms, "850": 850ms, "900": 900ms, "950": 950ms, "1000": 1000ms,
);


// Buttons
$btn-sizes: (
    'xs': (0.5rem, 12px),    // Padding: 0.5rem, Font size: 10px
    'sm': (0.625rem, 14px),  // Padding: 0.625rem, Font size: 12px
    'md': (0.75rem, 16px),   // Padding: 0.75rem, Font size: 14px
    'lg': (0.875rem, 18px),  // Padding: 0.875rem, Font size: 16px
    'xl': (1rem, 20px)       // Padding: 1rem, Font size: 18px
);


// Spinners
$spinner-border-sizes: (
    "xs": 0.25rem,  // 4px
    "sm": 0.5rem,   // 8px
    "md": 0.75rem,  // 12px
    "lg": 1rem,     // 16px
    "xl": 1.25rem,  // 20px
    "xxl": 1.5rem   // 24px
);


// Switcher dimension
$switcher-dimension-map: (
    "xs": (20px, 10px, 7px),
    "sm": (30px, 15px, 12px),
    "md": (40px, 20px, 15px),
    "lg": (50px, 25px, 17px),
    "xl": (60px, 30px, 22px),
    "xxl": (70px, 35px, 25px)
);


// Icon sizes map (width & height for each size)
$base-icon-size: 2rem;
$icon-sizes: (
    "xs": 1.2rem,
    "sm": 1.6rem,
    "md": $base-icon-size,  // Default size
    "lg": 2.8rem,
    "xl": 3.6rem,
    "xxl": 4.4rem,
);

// Icon map with icon name as key and SVG file path as value
$icons: (
    "check": "../assets/icons/check.svg",
    "info": "../assets/icons/info.svg",
    "warning": "../assets/icons/warning.svg"
);


// Default breadcrumb divider
$breadcrumb-divider: '/';


// Placeholder dimensions
$placeholder-heights: (
    'xs': 0.625rem,
    'sm': 0.8125rem,
    'md': 1rem,
    'lg': 1.1875rem,
    'xl': 1.375rem
);


// Scroll animations
$scroll-animation-offset:   6rem;