/* ==========================================================================
 * File Name:         Variable
 * Description:       List of all variables used in Beet
 * Editing Details:   Change any variable to override to the values
                      you choose
                      Ensure to recompile this SASS file after modification

 * Attn: Variables are organized according to sections/type for ease of reference
 ============================================================================ */

//GENERAL GLOBAL VARIABLES: Breakpoints, columns

$breakpoints: (
  sm: 550px, //phones
  md: 750px, //tablet
  lg: 990px //desktop
  //Your custom breakpoints
);

//Grid Columns
$grid-col: 6;

/* ==========================================================================
 *
 * COLOURS
 * The palette is inspired of British artist Melanie Johnson's print work
 * To change any colours, simply swap out the current HSL values for your desired ones
 *
============================================================================= */

//Back ground and font colour:

//Accent colours
$accent:(
  $beet: #580C2D,//hsl(334, 76%, 20%),
  $acai: #B43D76,//hsl(330, 65%, 70%),
  $rose: #F098A4,//hsl(351, 36%, 94%),

  $kale: #617C2D,//hsl(80, 63%, 48%),
  $avocado: #89924F,//hsl(67, 45%, 57%),
  $lettuce: #c8dcb7,//hsl(89, 38%, 79%),

  $tomatoe: #EC5B2C,//hsl(4, 83%, 55%),
  $orange: #EF993A,//hsl(9, 85%, 58%),
  $lemon: #f9e753//hsl(15, 93%, 65%),

  $deepwater: #2B547B,//hsl(208, 64%, 48%),
  $hydrangea: #6CB0DA,//hsl(91, 16%, 86%),
  $wave: #C1CFD9,//hsl(204, 10%, 85%),
  //Your own accent colours
);

//Basic colours & Gradient of gray
$basic: (
    $mute: #F9F7EF,//hsl(48, 3%, 97%),
    $main-gray: #D5D4CF,//hsl(49, 2%, 83%),
    $light-gray: ligten($main-gray, 18%),
    $dark-gray: darken($main-gray, 18%),
    $extra-dark-gray: darken($main-gray, 36%),
    $dark: #1E1C1B,//hsl(19, 9%, 11%),
    $peach: #F8E9D9,//hsl(29, 12%, 97%),
    //Your own basic or gradient colours
);

/* ==========================================================================
 *
 * FONT SCALES, TYPES & WEIGHTS
 * Beet has incorporated 3 types of Adobe fonts: Giulia, Forma DJP Micro, Realist
 * To change any font, rename the font name into the variables below and incorporate
   the corresponding font code.
 * 
============================================================================= */

// Fonts
$primary-font: "Giulia", san-serif;
$secondary-font: "Forma DJR Micro", serif;
$terciary-font: "Realist", serif;

$base-font-size: 16px;
$mobile-base-font-size: 14px;

$font-light: 300;
$font-regular: 400;
$font-bold: 500;

// Typographic scales
$multipliers: (
    minor-third: 1.200,
    major-second: 1.125,
    augmented-fourth: 1.414,
    // Your custom name: ratio pair
);

/* ==========================================================================
 *
 * HEIGHTS, PADDING & MARGIN
 * Default height, padding and margin values
 *
 *
============================================================================= */

/* Padding */

// Size Map

$sizes: (
  xs: 0.25rem,
  s: 0.5rem,
  m: 1rem,
  l: 1.5rem,
  xl: 2rem
);

$padding-xs: map-get($sizes, xs);
$padding-s: map-get($sizes, s);
$padding-m: map-get($sizes, m);
$padding-l: map-get($sizes, l);
$padding-xl: map-get($sizes, xl);

/* Margins */
$margin-xs: $padding-xs;
$margin-s: $padding-s;
$margin-m: $padding-m;
$margin-l: $padding-l;
$margin-xl: $padding-xl;

/* Line Height */
$base-line-height: 1.5em;
$large-line-height: calc(#{$base-line-height} + 1em);

/* Container Heights */
$height-s: 1.5rem;
$height-m: 2.5rem;
$height-l: 4.5rem;
$height-xl: 6.5rem;
$height-xxl: 8.5rem;

/* ==========================================================================
 *
 * BUTTONS
 * Button size, background & text color
 *
 *
============================================================================= */

$button-s: 1rem;
$button-m: 1.1rem;
$button-l: 1.2rem;

$button-bkgd-beet: map-get($accent,beet);
$button-bkgd-kale: map-get($accent,kale);
$button-bkgd-tomatoe: map-get($accent,tomatoe);
$button-bkgd-deepwater: map-get($accent,deepwater);
$button-bkgd-dark: map-get($basic,dark);
$button-bkgd-mute: map-get($basic,mute);
$button-bkgd-gray: map-get($basic,main-gray);
$button-bkgd-peach: map-get($basic,peach);

$button-text-light:map-get($basic,mute);
$button-text-dark: map-get($basic,dark);

/* ==========================================================================
 *
 * CARDS
 * Card colours, padding, box-shadow, and backgrounds
 *
 *
============================================================================= */

//General cards
$card-box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.1);
$card-box-shadow-hover: 0 3px 9px rgba(0, 0, 0, 0.3);
$card-padding-l: 0rem 1.5rem;
$card-padding-m: 0rem 1rem;
$card-padding-s: 0rem 0.5rem;
$card-margin: 0 0 1rem 0;
$card-bkgd-mute: $button-bkgd-mute;
$card-bkgd-dark: $button-bkgd-dark;
$card-bkgd-rose: map-get($accent,rose);
$card-bkgd-lettuce: map-get($accent,lettuce);
$card-bkgd-wave: map-get($accent,wave);