//
// Component: Variables
//
// ========================================================================

@internal-fonts: 'Fira+Sans+Condensed:300,300i,400,400i|Josefin+Sans:300,300i,600,600i,700,700i|Fira+Mono';


// Global variables
// ========================================================================

//
// Typography
//

@global-font-family:                            Fira Sans Condensed;
@global-font-size:                              15px;
@global-line-height:                            1.73;

@global-xxlarge-font-size:                      42px;
@global-xlarge-font-size:                       32px;
@global-large-font-size:                        24px;
@global-medium-font-size:                       20px;
@global-small-font-size:                        12px;

@global-primary-font-family:                    Josefin Sans;
@global-primary-font-weight:                    700;
@global-primary-text-transform:                 uppercase;
@global-primary-letter-spacing:                 4px;
@global-primary-font-style:                     italic;

@global-secondary-font-family:                  Josefin Sans;
@global-secondary-font-weight:                  700;
@global-secondary-text-transform:               uppercase;
@global-secondary-letter-spacing:               2px;
@global-secondary-font-style:                   italic;

//
// Colors
//

@global-color:                                  fade(#DEDFFF, 70%);
@global-emphasis-color:                         #fff;
@global-muted-color:                            fade(#DEDFFF, 45%);

@global-link-color:                             #F43482;
@global-link-hover-color:                       #7370FF;

@global-inverse-color:                          #08091e;

//
// Backgrounds
//

@global-background:                             #211b46;

@global-muted-background:                       desaturate(lighten(@global-background, 5%), 4%);
@global-primary-background:                     #F43482;
@global-secondary-background:                   #3234FF;

@global-success-background:                     #53DA71;
@global-warning-background:                     #FFA055;
@global-danger-background:                      #FC4B4E;

//
// Borders
//

@global-border:                                 rgba(225,219,255,0.1);
@global-border-width:                           2px;
@global-border-radius:                          0;

//
// Box-Shadows
//

@global-small-box-shadow:                       0 5px 25px rgba(14,15,37,0.6);
@global-medium-box-shadow:                      0 8px 45px rgba(14,15,37,0.6);
@global-large-box-shadow:                       0 12px 50px rgba(14,15,37,0.6);
@global-xlarge-box-shadow:                      0 18px 70px rgba(14,15,37,0.6);

//
// Spacings
//

// Used in margin, section, list
@global-margin:                                 20px;
@global-small-margin:                           10px;
@global-medium-margin:                          40px;
@global-large-margin:                           80px;
@global-xlarge-margin:                          140px;

// Used in grid, column, container, align, card, padding
@global-gutter:                                 20px;
@global-small-gutter:                           10px;
@global-medium-gutter:                          40px;
@global-large-gutter:                           80px;

//
// Controls
//

@global-control-height:                         40px;
@global-control-small-height:                   25px;
@global-control-large-height:                   55px;

//
// Z-index
//

@global-z-index:                                1000;