// @import 'include-media/dist/_include-media';

// Breakpoints
$breakpoints: (
  small: 320px,
  medium: 800px,
  large: 1024px,
);
$medium-screen: 800px;

// Sizing
$unit: 8px;

// Colors
$grey-00: #111;
$grey-10: #191919;
$grey-15: #232323;
$grey-20: #2f2f2f;
$grey-30: #444;
$grey-40: #777;
$grey-50: #888;
$grey-60: #a9a9a9;
$grey-70: #c6c6c6;
$grey-80: #e9e9e9;
$grey-90: #f5f5f5;
$grey-100: #fafafa;

$page--bg--light: $grey-90;
$page--bg--dark: $grey-10;

$page--hover--light: $grey-90;
$page--hover--dark: $grey-20;

$page--element--bg--light: $grey-70;
$page--element--bg--dark: $grey-30;

$input--bg--light: $grey-90;
$input--bg--light--hover: $grey-80;
$input--bg--dark: $grey-10;
$input--bg--dark--hover: $grey-15;

$grid--rep--hover--light: white;
$grid--rep--hover--dark: $grey-00;

$grid--border--color--light: $grey-80;
$grid--border--color--dark: $grey-30;

$switch--nub--bg--light: $grey-80;
$switch--nub--bg--dark: $grey-20;

$text--primary--color--light: $grey-30;
$text--primary--color--dark: $grey-90;

$text--secondary--color--light: $grey-40;
$text--secondary--hover--light: $grey-30;
$text--secondary--color--dark: $grey-40;
$text--secondary--hover--dark: $grey-70;

$icon--secondary--color--light: $grey-70;
$icon--secondary--color--dark: $grey-40;
$icon--secondary--hover--light: $grey-40;
$icon--secondary--hover--dark: $grey-70;

$blue: #275dc5;
$red: #ff6161;
$error: #d13a3a;

// Colors: Elements

$wind-text-00: #023e28;
$wind-text-10: #006a43;
$wind-text-20: #1dc688;
$wind-bg-00: #4cffbf55;
$wind-bg-10: #4cffbf;
$wind-bg-20: #cdffed;

$fire-text-00: #3f0202;
$fire-text-10: #6e0000;
$fire-text-20: #ec5c5c;
$fire-bg-00: #ff4d4d55;
$fire-bg-10: #ff4d4d;
$fire-bg-20: #ffcdcd;

$water-text-00: #03263b;
$water-text-10: #004b77;
$water-text-20: #5cb7ec;
$water-bg-00: #6cc9ff55;
$water-bg-10: #6cc9ff;
$water-bg-20: #cdedff;

$earth-text-00: #321602;
$earth-text-10: #662a00;
$earth-text-20: #ec985c;
$earth-bg-00: #fd9f5b55;
$earth-bg-10: #fd9f5b;
$earth-bg-20: #ffe2cd;

$light-text-00: #433d02;
$light-text-10: #716500;
$light-text-20: #c5b20c;
$light-bg-00: #ffed4c55;
$light-bg-10: #ffed4c;
$light-bg-20: #fffacd;

$dark-text-00: #260134;
$dark-text-10: #560075;
$dark-text-20: #c65cec;
$dark-bg-00: #d565fb55;
$dark-bg-10: #d565fb;
$dark-bg-20: #f2cdff;

$normal: 400;
$medium: 500;
$bold: 600;

// Font size
$font-tiny: 11px;
$font-small: 13px;
$font-button: 15px;
$font-regular: 16px;
$font-medium: 18px;
$font-large: 21px;
$font-xlarge: 24px;
$font-xxlarge: 28px;

// Scale factors
$scale-wide: scale(1.05, 1.05);
$scale-tall: scale(1.012, 1.012);

// Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;