@import url(./reset_styles.css);
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Ubuntu+Mono&display=swap");

/*** COLORS ***/
:root {
  --brand-50: #f7fbff;
  --brand-100: #dbe9ff;
  --brand-200: #b7d1ff;
  --brand-300: #b7d1ff;
  --brand-400: #79a2ff;
  --brand-500: #4d7eff;
  --brand-600: #3860db;
  --brand-700: #2646b7;
  --brand-800: #182f93;
  --brand-900: #0e207a;
  --brand-bg-soft: var(--brand-50, #f7fbff);
  --brand-bg-soft-hover: var(--brand-100, #dbe9ff);
  --brand-bg: var(--brand-500, #4d7eff);
  --brand-bg-hover: var(--brand-600, #3860db);

  --btn-blue: #4464ad;
  --btn-blue-hover: #22387c;
  --btn-lavander: #a4b0f5;
  --btn-lavander-hover: #7783d2;
  --btn-orange: #f58f29;
  --btn-orange-hover: #d26f1d;

  --console-content: #b6b9bf;
  --console-blue: #008ac9;
  --console-pink: #dd4a68;
  --console-green: #6a9b06;
  --console-brown: #9a6e3a;
  --console-tangerine: #ee9942;

  --title: #0d162a;
  --content: #3d4454;
  --content-light: #868a94;
  --content-lighter: #b6b9bf;
  --text-title: var(--title);
  --text-content: var(--content);
  --text-content-lighter: var(--content-lighter);
  --text-icon-light: var(--content-light);
  --text-icon: var(--brand-500);
  --text-white: #ffffff;

  --border-divider: #dce5e9;
  --body-bg: #fdfefe;
  --body-alt-bg: #f0f2f5;
  --snippet-bg: #252d3f;

  --drop-shadow: rgba(120, 125, 147, 0.15);
}

/*** Fonts ***/
:root {
  --body-font: "Heebo", sans-serif;
  --code-font: "Ubuntu Mono", monospace;
}

/* Font line-heights */
:root {
  --heading-line-height: 120%;
  --normal-line-height: 140%;
}

/* Font Sizes */
:root {
  --big-heading-size: 40px;
  --base-heading-size: 32px;
  --small-heading-size: 24px;
  --smaller-heading-size: 20px;
  --normal-text-size: 16px;
  --small-text-size: 14px;
  --smaller-text-size: 12px;
  --code-text-size: 16px;
}
/*** Utility Clases for Fonts ***/
.hd-big {
  font-family: var(--body-font);
  font-size: var(--big-heading-size);
  line-height: var(--heading-line-height);
  font-weight: 700;
}

.hd-base {
  font-family: var(--body-font);
  font-size: var(--base-heading-size);
  line-height: var(--heading-line-height);
  font-weight: 700;
  color: var(--text-title);
}

.hd-small {
  font-family: var(--body-font);
  font-size: var(--small-heading-size);
  line-height: var(--heading-line-height);
  font-weight: 700;
  color: var(--text-title);
}

.hd-smaller {
  font-family: var(--body-font);
  font-size: var(--smaller-heading-size);
  line-height: var(--heading-line-height);
  font-weight: 700;
}

.text-normal-regular {
  font-family: var(--body-font);
  font-size: var(--normal-text-size);
  line-height: var(--normal-line-height);
  font-weight: 400;
}

.text-normal-medium {
  font-family: var(--body-font);
  font-size: var(--normal-text-size);
  line-height: var(--normal-line-height);
  font-weight: 500;
  color: var(--text-content);
}

.text-small-regular {
  font-family: var(--body-font);
  font-size: var(--small-text-size);
  line-height: var(--normal-line-height);
  font-weight: 400;
}

.text-small-medium {
  font-family: var(--body-font);
  font-size: var(--small-text-size);
  line-height: var(--normal-line-height);
  font-weight: 500;
}
.text-smaller-regular {
  font-family: var(--body-font);
  font-size: var(--smaller-text-size);
  line-height: var(--normal-line-height);
  font-weight: 400;
}

.text-smaller-medium {
  font-family: var(--body-font);

  font-size: var(--smaller-text-size);
  line-height: var(--normal-line-height);
  font-weight: 500;
}

.code-normal-regular {
  font-family: var(--code-font);
  font-size: var(--code-text-size);
  line-height: var(--normal-line-height);
  font-weight: 400;
}

/*** Spacing ***/
:root {
  --spacing: 8px;
}

/* FONTS */
* {
  font-family: Arial, sans-serif;
}

h1 h2,
h3,
h4,
h5,
h6,
th,
thead {
  font-family: Helvetica, sans-serif;
  font-weight: 600;
}

h1 {
  font-size: 1.875rem;
  margin: 0;
}

h2 {
  font-size: 1.5rem;
  margin: 16px 0;
}

h3 {
  font-size: 1.25rem;
  margin: 8px 0;
}