/**
 * --------------------------------------------------------------
 * Steller CSS
 * Theme Configuration
 *
 * The centralized config file for your design system.
 * --------------------------------------------------------------
 */

/**
 * --------------------------------------------------------------
 * Color
 * --------------------------------------------------------------
 */

$steller-colors: (
  // Brand
  'primary': #3f7cac,
  'secondary': #e2cb9e,

  // Accents
  'accent-green': #73937e,
  'accent-teal': #86bbd8,

  // System
  'success': #4cd964,
  'info': #86bbd8,
  'warning': #fc0,
  'danger': #ff7f66,

  // Grayscale
  'white': #fff,
  'black': #000,
  'dark-grey': #393d3f,
  'light-grey': lighten(#393d3f, 22%),
);

/**
 * --------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------
 */

$steller-font-families: (
  'accent': cursive,
);

$steller-font-sizes: (
  'xs': 0.75rem,
  'sm': 0.875rem,
  'md': 1rem,
  'lg': 1.5rem,
  'xl': 1.875rem,
  '2xl': 2.25rem,
  '3xl': 3rem,
  '4xl': 3.75rem,
);

$steller-font-weights:(
  'bold': 700,
  'medium': 500,
  'regular': 400,
  'light': 300,
  'thin': 100,
);

$steller-leadings: (
  'sm': 1.25rem,
  'md': 1.5rem,
  'lg': 1.75rem,
  'xl': 2rem,
);

$steller-letter-spacings: (
  'tight': -0.05rem,
  'normal': 0,
  'wide': 0.05rem,
);

/**
 * --------------------------------------------------------------
 * Container
 * --------------------------------------------------------------
 */

$steller-container-width: 1140px;

$steller-container-paddings: (
  'sm': (padding: 8px),
  'md': (padding: 12px),
  'lg': (padding: 16px),
);

/**
 * --------------------------------------------------------------
 * Breakpoints
 * --------------------------------------------------------------
 */

$steller-breakpoints: (
  'sm': 320px,
  'md': 600px,
  'lg': 1024px,
);

/**
 * --------------------------------------------------------------
 * Grid
 * --------------------------------------------------------------
 */

// Grid
$steller-grid-columns: 12;

$steller-column-gutters: (
  'sm': 16px,
  'md': 16px,
  'lg': 24px,
);

$steller-row-gutters: (
  'sm': 8px,
  'md': 8px,
  'lg': 16px,
);

/**
 * --------------------------------------------------------------
 * Spacing
 * --------------------------------------------------------------
 */

$steller-spacings: (
  'xs': 4px,
  'sm': 8px,
  'md': 16px,
  'lg': 24px,
  'xl': 32px,
  '2xl': 48px,
  '3xl': 64px,
);

// Borders
$steller-border-radiuses: (
  'sm': 5px,
  'md': 10px,
  'lg': 15px,
  'xl': 20px,
);

$steller-border-widths: (
  'xs': 1px,
  'sm': 2px,
  'md': 4px,
  'lg': 6px,
  'xl': 8px,
);

/**
 * --------------------------------------------------------------
 * Motion
 * --------------------------------------------------------------
 */

$steller-durations: (
  'extra-slow': 500ms,
  'slow': 400ms,
  'normal': 300ms,
  'fast': 200ms,
  'extra-fast': 100ms,
);

/**
 * --------------------------------------------------------------
 * Effects
 * --------------------------------------------------------------
 */

$steller-box-shadows: (
  'sm': 0 7px 15px 0 rgba(0, 0, 0, 0.11), 0 1px 8px 0 rgba(0, 0, 0, 0.06),
  'md': 0 10px 20px 0 rgba(0, 0, 0, 0.22), 0 3px 12px 0 rgba(0, 0, 0, 0.07),
  'lg': 0 15px 30px 0 rgba(0, 0, 0, 0.33), 0 5px 15px 0 rgba(0, 0, 0, 0.1),
);

/**
 * --------------------------------------------------------------
 * Gradients
 * --------------------------------------------------------------
 */

$steller-gradients: (
  'cta-primary': linear-gradient(to right, #55c1ff, #5863f8),
);


/**
 * --------------------------------------------------------------
 * Modules
 *
 * Modules allow you to extend Steller by providing a map
 * of additional classes. Module classes are applied
 * to all variant types (responsive, hover, focus, active).
 * --------------------------------------------------------------
 */

$steller-modules: ();