/* Grid system */
$container-padding: 1rem;
$grid-columns: 12;

/* Breakpoints */
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1520px
);

/* Display types */
$display-types: block, flex, inline, inline-block, inline-flex, grid, none;

/* Color palette */
$colors: (
  primary: #0981b1,
  primary-alt: #0981b1b6,
  alt: #0981b1b6,
  secondary: #333,
  success: #34b97b,
  warning: #ffc107,
  danger: #dc3545,
  info: #0dcaf0,
  light: #e5e5e5,
  dark: #212529,
  white: #ffffff,
  black: #000000,
  muted: #C7C7C7,
  accent-white: #f7f7f7,
  accent: #0ed884,
  transparent: transparent
);

/* Spacing scale */
$spacing-scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem;

/* Shadows (soft shadows) */
$shadows: (
  1: 0 1px 3px rgba(0, 0, 0, 0.12),
  2: 0 2px 6px rgba(0, 0, 0, 0.16),
  3: 0 4px 10px rgba(0, 0, 0, 0.18),
  4: 0 6px 15px rgba(0, 0, 0, 0.20),
  5: 0 10px 24px rgba(0, 0, 0, 0.22)
);

$drop-shadows: (
  1: 0 2px 4px rgba(0, 0, 0, 0.14),
  2: 0 4px 8px rgba(0, 0, 0, 0.18),
  3: 0 8px 16px rgba(0, 0, 0, 0.20),
  4: 0 12px 24px rgba(0, 0, 0, 0.22),
  5: 0 20px 40px rgba(0, 0, 0, 0.24)
);




/* Flex utilities */
$flex-directions: (
  row: row,
  row-reverse: row-reverse,
  column: column,
  column-reverse: column-reverse
);

$justify-content-values: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly
);

$align-items-values: (
  start: flex-start,
  end: flex-end,
  center: center,
  baseline: baseline,
  stretch: stretch
);

/* Button component variables */
$btn-padding-y: 0.375rem;
$btn-padding-x: 0.75rem;
$btn-font-size: 1rem;
$btn-border-radius: 0.25rem;
$btn-border-width: 1px;
$btn-hover-brightness: 0.9;

/* Typography */
$font-family-base: "Nunito", sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;

$font-sizes: (
  xs: 0.75rem,
  sm: 0.875rem,
  base: 1.1rem,
  lg: 1.35rem,
  xl: 1.8rem,
  xxl: 2.2rem
);

$font-weights: (
  light: 300,
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700
);

$line-heights: (
    tight: 1,
    normal: 1.3,
    heading: 1.5

);


$border-widths: (
  0: 0,
  1: 1px,
  2: 2px,
  3: 3px
);

$border-radius-sizes: (
  none: 0,
  sm: 0.125rem,
  md: 0.25rem,
  lg: 0.5rem,
  xl: 1rem,
  full: 9999px
);

$spacer: 1rem;
$spacing: (
    "0": 0,
    "1": $spacer * 0.25,
    "2": $spacer * 0.5,
    "3": $spacer,
    "4": $spacer * 1.5,
    "5": $spacer * 3
);

$gutters: (
  0: 0,
  1: map-get($spacing, "1"),
  2: map-get($spacing, "2"),
  3: map-get($spacing, "3"),
  4: map-get($spacing, "4"),
  5: map-get($spacing, "5") 
);