@import 'mixins.scss';

/* Atomic Unit
 * -------------------------------------------------------------------------- */

$page-width: 784px;

$unit: 8px;
$margin: $unit * 5;

$unit-fourth: calc($unit / 4);
$unit-half: calc($unit / 2);
$unit-three-fourth: calc($unit / 4) * 3;
$unit-2x: $unit * 2;
$unit-3x: $unit * 3;
$unit-4x: $unit * 4;
$unit-5x: $unit * 5;
$unit-6x: $unit * 6;
$unit-8x: $unit * 8;
$unit-10x: $unit * 10;
$unit-12x: $unit * 12;
$unit-14x: $unit * 14;
$unit-16x: $unit * 16;
$unit-18x: $unit * 18;
$unit-20x: $unit * 20;

/* Corner Radius
 * -------------------------------------------------------------------------- */
$corner-radius-xs: 4px; // $unit-half
$corner-radius-sm: 6px; // $unit-three-fourth
$corner-radius-md: 8px; // $unit
$corner-radius-lg: 10px; // $unit + 2px
$corner-radius-xl: 12px; // $unit * 1.5
$corner-radius-2xl: 16px; // $unit-2x
$corner-radius-3xl: 24px; // $unit-3x
$corner-radius-full: 999px; // Full rounded

/* Page properties
 * -------------------------------------------------------------------------- */
$page-corner-radius: $corner-radius-md;
$image-corner-radius: $corner-radius-2xl;
$card-corner-radius: $corner-radius-3xl;

$page-top-margin: $unit-6x;

$page-vert-padding: $unit-6x;
$page-horz-padding: $unit-5x;

$page-fourth: calc(($page-width - $margin * 5) / 4);
$page-third: calc(($page-width - $margin * 5) / 3);
$page-half: calc(($page-fourth * 2) + $margin);

$card-height: $unit-14x;
$mention-padding: $unit-3x;

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

$font-stack: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;

$font-unit: 14px;

$font-size-small: 0.7rem; // 10
$font-size: 1rem; // 14
$font-size-med: 1.25rem; // 16
$font-size-large: 1.4rem; // 18
$font-size-xlarge: 1.65rem; // 22

$font-weight: 400;
$font-weight-med: 500;
$font-weight-bold: 600;

$line-height: 1.3;

$letter-spacing: -0.02em;

/* Colors
 * -------------------------------------------------------------------------- */
$grey-100: #ffffff;
$grey-97: #fafafa;
$grey-95: #f5f5f5;
$grey-90: #f7f7f7;
$grey-85: #ebebeb;
$grey-80: #e8e8e8;
$grey-70: #dfdfdf;
$grey-60: #cccccc;
$grey-5: #f9f9f9;
$grey-50: #b2b2b2;
$grey-40: #999999;
$grey-30: #808080;
$grey-20: #666666;
$grey-10: #4d4d4d;
$grey-00: #333333;

$red-90: #ff9d8f;
$red-80: #ff6a54;
$red-60: #e33d3d;
$red-50: #d33;
$red-40: #d31919;
$red-00: #3d0c0c;

$blue-60: #2e8bc0;
$blue-50: #1482c1;
$blue-40: #126fa8;
$blue-20: #0f5d8f;
$blue-10: #e6f3ff;

$yellow-90: #fff9e6;
$yellow-80: #ffeb99;
$yellow-70: #ffdd4d;
$yellow-60: #ffcc00;
$yellow-50: #f5c500;
$yellow-40: #e6b800;
$yellow-30: #cc9900;
$yellow-20: #996600;
$yellow-10: #664400;

$salmon-pink: #ffd5cf; // Desaturated salmon pink for hover states

$bg-color: #e8e8e8;
$page-color: #ffffff;
$card-color: #f7f7f7;
$card-color-hover: #f0f0f0;

$text-color-light: #b2b2b2;
$text-color-body: #666666;

$accent-color: #e33d3d;
$grey-color: #f0f0f0;
$primary-color: #1482c1; // Using labs color as primary

$image-border-color: rgba(0, 0, 0, 0.03);

/* Shadows
 * -------------------------------------------------------------------------- */
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
$card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

/* Pill colors
 * -------------------------------------------------------------------------- */
$work-bg: #ffcdc5;
$work-color: #d0290d;
$universe-bg: #ffebc5;
$universe-color: #b97d14;
$labs-bg: #c5eaff;
$labs-color: #1482c1;

$facebook-color: #3b5998;
$twitter-color: #55acee;
$instagram-color: #3f729b;
$pinterest-color: #bd061c;
$github-color: #6cc644;
$cmu-color: #fe6420;
$quip-color: #ae4830;

$twitter-button-color: #6cc0ff;
$twitter-text-color: #0f5f9b;

/* Images
 * -------------------------------------------------------------------------- */
$corner-radius: $unit-2x;
$mobile-corner-radius: $unit-2x;

/* Inputs
 * -------------------------------------------------------------------------- */

$input-background-color: #f7f7f7;
$input-background-color-hover: #f0f0f0;
$input-text-color: #666666;
$input-text-color-hover: #4d4d4d;

/* Avatar header
 * -------------------------------------------------------------------------- */
$avatar-radius: 2rem;
$avatar-url: url('images/header.png');

/* Media queries breakpoints
 * These needs to be revisited
 * -------------------------------------------------------------------------- */

$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;