@import url(atoms/logo.css);
@import url(atoms/buttons.css);
@import url(atoms/icons.css);
@import url(atoms/tables.css);

@import url(molecules/main-navigation.css);
@import url(molecules/card.css);

@import url(organisms/page-header.css);
@import url(organisms/hero.css);
@import url(organisms/mi-principles.css);
@import url(organisms/mi-projects-initiatives.css);
@import url(organisms/mi-open-source.css);
@import url(organisms/page-footer.css);

@font-face {
  font-display: swap;
  font-family: rasa;
  font-style: normal;
  font-weight: bold;
  src: url("../assets/typography/Rasa-Bold.woff") format("woff2"),
    url("../assets/typography/Rasa-Bold.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: inter;
  font-style: normal;
  font-weight: normal;
  src: url("../assets/typography/Inter-Regular.woff") format("woff2"),
    url("../assets/typography/Inter-Regular.woff") format("woff");
}

@font-face {
  font-display: swap;
  font-family: inter;
  font-style: normal;
  font-weight: bold;
  src: url("../assets/typography/Inter-Medium.woff") format("woff2"),
    url("../assets/typography/Inter-Medium.woff") format("woff");
}

:root {
  --border-radius-default: 0.5rem;

  --color-blue-90: #1b3e59;
  --color-blue-80: #1c4f72;
  --color-blue-70: #1a6493;
  --color-blue-60: #1178b2;
  --color-blue-50: #3991cf;
  --color-blue-40: #73a9db;
  --color-blue-30: #9cc0e5;
  --color-blue-20: #c2d7ee;
  --color-blue-10: #e6eef8;

  --color-green-90: #2e3f34;
  --color-green-80: #3c4f43;
  --color-green-70: #526357;
  --color-green-60: #66766b;
  --color-green-50: #818e85;
  --color-green-40: #9ca7a0;
  --color-green-30: #b6beb9;
  --color-green-20: #d1d6d2;
  --color-green-10: #eceeed;

  --color-neutral-90: #201d1c;
  --color-neutral-80: #393534;
  --color-neutral-70: #534e4d;
  --color-neutral-60: #706968;
  --color-neutral-50: #8d8583;
  --color-neutral-40: #a89e9c;
  --color-neutral-30: #bcb4b3;
  --color-neutral-20: #d5cfcf;
  --color-neutral-10: #e6e3e3;

  --color-neutral-inverted: #fff;

  --color-purple-90: #3b3562;
  --color-purple-80: #48447f;
  --color-purple-70: #5656a5;
  --color-purple-60: #6268ca;
  --color-purple-50: #7a82e3;
  --color-purple-40: #999eeb;
  --color-purple-30: #b4b8f1;
  --color-purple-20: #cfd2f7;
  --color-purple-10: #ebedfc;

  --color-red-90: #711c19;
  --color-red-80: #8e231f;
  --color-red-70: #a93633;
  --color-red-60: #b65451;
  --color-red-50: #c47573;
  --color-red-40: #d29593;
  --color-red-30: #deb1b0;
  --color-red-20: #eacecd;
  --color-red-10: #f6ebeb;

  --color-yellow-90: #4b3818;
  --color-yellow-80: #5e471b;
  --color-yellow-70: #775a1f;
  --color-yellow-60: #8e6d22;
  --color-yellow-50: #ac8526;
  --color-yellow-40: #ca9e28;
  --color-yellow-30: #e4b638;
  --color-yellow-20: #f3d085;
  --color-yellow-10: #fceccd;

  --color-gradient-hero: linear-gradient(
    135deg,
    var(--color-yellow-40),
    var(--color-yellow-70) 80%
  );

  --layout-small-gutter: 0.5rem;
  --layout-reduced-gutter: 1rem;
  --layout-base-gutter: 1.5rem;
  --layout-medium-gutter: 2.5rem;
  --layout-wide-gutter: 4rem;

  --layout-base-padding: 1rem;

  --typography-font-fallback: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Ubuntu, sans-serif;
  --typography-font-body: "inter", var(--typography-font-fallback);
  --typography-font-heading: "rasa", serif;

  --typography-line-height: 1.75;
  --typography-line-height-heading: 1.25;

  --typography-font-size-display: 2.986rem;
  --typography-font-size-xxl: 2.488rem;
  --typography-font-size-xl: 2.074rem;
  --typography-font-size-large: 1.728rem;
  --typography-font-size-medium: 1.44rem;
  --typography-font-size-small-medium: 1.2rem;
  --typography-font-size-default: 1rem;
}

@media screen and (min-width: 63.9375em) {
  :root {
    --typography-font-size-display: 5.61rem;
    --typography-font-size-xxl: 4.209rem;
    --typography-font-size-xl: 3.157rem;
    --typography-font-size-large: 2.369rem;
    --typography-font-size-medium: 1.777rem;
    --typography-font-size-small-medium: 1.333rem;
    --typography-font-size-default: 1rem;
  }
}

body {
  font: 100% / var(--typography-line-height) var(--typography-font-body);
}

h1,
h2,
h3,
h4 {
  font-family: var(--typography-font-heading);
  line-height: var(--typography-line-height-heading);
}

h1 {
  font-size: var(--typography-font-size-xxl);
}

h2 {
  font-size: var(--typography-font-size-xl);
}

h3 {
  font-size: var(--typography-font-size-large);
}

h4 {
  font-size: var(--typography-font-size-medium);
}

p {
  margin-bottom: var(--layout-base-gutter);
}

a {
  color: var(--color-blue-70);
}

a:hover,
a:focus {
  text-decoration: none;
}

strong {
  font-size: var(--typography-font-size-small-medium);
  font-weight: bold;
}

.content-lead {
  font-size: var(--typography-font-size-small-medium);
  max-width: 90ch;
}

/* simple content pages main container style */
.content-page-main {
  background-color: var(--color-blue-10);
  padding: var(--layout-wide-gutter);
}

ul.project-links {
  margin: var(--layout-medium-gutter) 0;
}

ul.project-links .button {
  display: block;
  margin: var(--layout-reduced-gutter) 0;
}

@media screen and (min-width: 63.9375em) {
  ul.project-links {
    display: flex;
    grid-gap: var(--layout-reduced-gutter);
    gap: var(--layout-reduced-gutter);
  }
}

/* Reset some list default styling. Useful when creating custom styled lists */
.reset-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Reset some button defaults. Useful when creating custom styled buttons */
.ghost-button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* We use display: none; because we _do_ want to hide the tab panel from 
   everyone _including_ screen readers. */
.hidden {
  display: none;
}

/* hides from everyone except screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* reverts the visually-hidden styling */
.revert-visually-hidden {
  position: initial;
  width: initial;
  height: initial;
  margin: initial;
  padding: initial;
  overflow: initial;
  clip: initial;
  border: initial;
}