@import '../wireframe/_variables';

/**
 * COLOURS
 * =============================================================================
 * VARIABLES
 */
$brownish-grey: #666666;
$boulder: #767676;
$silver: #cccccc;
$white-two: #eeeeee;
$white: #ffffff;
$black: #111111;
$black-one: #000000;
$cod-gray: #151515;
$mine-shaft: #3e3e3e;
$gray: #8a8a8a;
$mercury: #e2e2e2;
$wild-sand: #f5f5f5;
$alabaster: #f9f9f9;
$cinnabar: #e03b2a;

// ----- Social Colours -----//
$COLOUR_SOCIAL: (
    "email": $cod-gray,
    "facebook": #3b5998,
    "instagram": #833ab4,
    "pinterest": #bd081c,
    "twitter": #55acee,
    "youtube": #e52d27,
    "whatsapp": #52b44f
);

$COLOUR_SOCIAL_LIGHT: $COLOUR_SOCIAL;

$COLOUR_SOCIAL_DARK: (
    "email": $brownish-grey,
    "facebook": #3b5998,
    "instagram": #833ab4,
    "pinterest": #bd081c,
    "twitter": #55acee,
    "youtube": #e52d27,
    "whatsapp": #52b44f
);

/**
 * SIZES
 * =============================================================================
 * GUTTERS
 */
$DESKTOP_SIDE_GUTTER: 60px;
$TABLET_SIDE_GUTTER: 60px;
$MOBILE_SIDE_GUTTER: 20px;
$DESKTOP_SLICE_MARGIN: 60px;
$TABLET_SLICE_MARGIN: 60px;
$MOBILE_SLICE_MARGIN: 40px;


/**
 * SIZES
 * =============================================================================
 * ARTICLE
 */
// Article left column - author, related articles
$ARTICLE_LEFT_COLUMN_WIDTH: 170px;
// Article center column - copy
$ARTICLE_CENTER_COLUMN_WIDTH: 620px;
// Article right column - ads
$ARTICLE_RIGHT_COLUMN_WIDTH: 300px;
// Margin between the left column and center column
$ARTICLE_LEFT_COLUMN_MARGIN: 60px;
// Margin between the right column and center column
$ARTICLE_RIGHT_COLUMN_MARGIN: 60px;
// Total occupied space of left column
$ARTICLE_LEFT_TOTAL: $ARTICLE_LEFT_COLUMN_WIDTH+$ARTICLE_LEFT_COLUMN_MARGIN;
// Total occupied space of right column
$ARTICLE_RIGHT_TOTAL: $ARTICLE_RIGHT_COLUMN_WIDTH+$ARTICLE_RIGHT_COLUMN_MARGIN;
// Total width of all the columns and margins
$ARTICLE_TOTAL: $ARTICLE_LEFT_COLUMN_WIDTH + $ARTICLE_LEFT_COLUMN_MARGIN + $ARTICLE_CENTER_COLUMN_WIDTH + $ARTICLE_RIGHT_COLUMN_MARGIN + $ARTICLE_RIGHT_COLUMN_WIDTH;

/**
 * TYPOGRAPHY
 * =============================================================================
 * HEADINGS
 */
$HEADINGS: (
    alpha: (
        h: h1,
        small: 34px,
        small-line-height: 39px,
        large: 62px,
        large-line-height: 67px,
        weight: normal,
        letter-spacing: 0
    ),
    beta: (
        h: h2,
        small: 30px,
        small-line-height: 35px,
        large: 32px,
        large-line-height: 37px,
        weight: normal,
        letter-spacing: 0
    ),
    gamma: (
        h: h3,
        small: 23px,
        small-line-height: 28px,
        large: 25px,
        large-line-height: 30px,
        weight: normal,
        letter-spacing: 0
    ),
    delta: (
        h: h4,
        small: 16px,
        small-line-height: 21px,
        large: 20px,
        large-line-height: 25px,
        weight: bold,
        letter-spacing: 0
    ),
    epsilon: (
        h: h5,
        small: 16px,
        small-line-height: 21px,
        large: 18px,
        large-line-height: 23px,
        weight: bold,
        letter-spacing: 0
    ),
    zeta: (
        h: h6,
        small: 15px,
        small-line-height: 20px,
        large: 15px,
        large-line-height: 20px,
        weight: bold,
        letter-spacing: 0
    )
);