// Variables
// --------------------------------------------------


// $Colors
// ----------------------------------
$gray-base:             #000 !default;
$gray-darker:           lighten($gray-base, 13.5%) !default; // #222
$gray-dark:             lighten($gray-base, 20%) !default;   // #333
$gray:                  lighten($gray-base, 60.8%) !default; // #9b9b9b
$gray-light:            lighten($gray-base, 86.5%) !default; // #dddddd
$gray-lighter:          lighten($gray-base, 95%) !default;   // #f7f7f7

$primary:               #ea6f5a !default;
$brand-success:         #00bb29 !default;
$brand-info:            #498ad5 !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #f53d3d !default;

// $Scaffolding
// ----------------------------------
// Background color for `<body>`.
$body-bg:                      #fff !default;
// Global text color on `<body>`.
$text-color:                   $gray-dark !default;
// Global textual link color.
$link-color:                   $primary !default;
// Link hover color set via `darken()` function.
$link-hover-color:             darken($link-color, 15%) !default;
// Link hover decoration.
$link-hover-decoration:        underline !default;

// $Typography
// ----------------------------------
$font-family-base:             -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif !default;
// Font size of the root html
$font-size-root:               62.5% !default;
// 1.4rem == 14px
$font-size-base:               1.4rem !default;

$line-height-base:             1.5 !default;
$line-height-sm:               1 !default;
$line-height-lg:               2 !default;

$headings: (
  h1:                          3.6rem,
  h2:                          3rem,
  h3:                          2.4rem,
  h4:                          1.8rem,
  h5:                          $font-size-base,
  h6:                          1.2rem
) !default;

// $Border
// ----------------------------------
$border-radius-base:            .4rem !default;
$border-radius-sm:              1rem !default;
$border-radius-md:              2rem !default;
$border-radius-lg:              4rem !default;

// $Iconography
// ----------------------------------
$icon-font-path:               "/assets/fonts/" !default;

// Spacing
// ----------------------------------
$spacer:                       1rem !default;
$spacer-x:                     $spacer !default;
$spacer-y:                     $spacer !default;

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  2: (
    x: $spacer-x,
    y: $spacer-y
  ),
  3: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  4: (
    x: ($spacer-x * 2),
    y: ($spacer-y * 2)
  ),
  5: (
    x: ($spacer-x * 2.5),
    y: ($spacer-y * 2.5)
  ),
  6: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

// Sizes
// ----------------------------------
$sizes: (
  25: 25%,
  33: 33.33333%,
  50: 50%,
  66: 66.66667%,
  75: 75%,
  100: 100%
) !default;

// $Container max widths
// ----------------------------------
$container-widths: (
  sm: 54rem,
  md: 72rem,
  lg: 96rem,
  xl: 114rem
) !default;

// $Screen breakpoints
// Adapting to different screen sizes, for use in media queries
// ----------------------------------
$screen-breakpoints: (
  xs: 0,
  sm: 57.6rem,
  md: 76.8rem,
  lg: 99.2rem,
  xl: 120rem
) !default;


// Components
// --------------------------------------------------


// Nav
// ----------------------------------
$nav-bar-height:               5.6rem !default;
$nav-bar-min-width:            76.8rem !default;
$nav-bar-max-width:            144rem !default;

// Btn
// ----------------------------------
$btn-default-height:           3.8rem !default;
$btn-default-margin-left:      1.5rem !default;
$btn-default-padding-left:     1.5rem !default;
$btn-default-margin:           .8rem $btn-default-margin-left !default;
$btn-default-border-radius:    .4rem !default;
$btn-default-font-size:        1.5rem !default;

// Card
// ----------------------------------
$card-box-shadow:              0 0 .8rem rgba(0,0,0,.1) !default;

// Avatar
// ----------------------------------
$avatar-default-font-size:     1.3rem !default;
$avatar-name-font-size:        1.6rem !default;

// Icon
// ----------------------------------
$icon-font-size:               2rem !default;

// Article
// ----------------------------------
$post-limit-width:             62rem !default;
$p-font-size:                  1.6rem !default;
$p-margin-bottom:              2.5rem !default;
$p-line-height:                1.7 !default;
$p-font-weight:                400 !default;


// Pages
// src/app/pages
// --------------------------------------------------


// $Note
// src/app/pages/note
// ----------------------------------

// @prop Post content width
$note-post-width:              62rem !default;

// $Collection
// src/app/pages/collection
// ----------------------------------

// @prop Avatar width
$collection-avatar-width:      8rem !default;
// @prop Avatar height
$collection-avatar-height:     $collection-avatar-width !default;
// @prop button width
$collection-btn-width:         10rem !default;
// @prop button width
$collection-btn-height:        3.8rem !default;

