@import './custom-media.css';
@import './font.css';
@import './custom-properties/color.css';
@import './custom-properties/font.css';

/* This file is the only spot where we attach styles directly to elements. It
represents a very minimal set of global changes to even out styling, like layering
a few opinions on top of normalize.css */

/* Border box is just better */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/* Base resets and font styling */
html {
  height: 100%;
  font-size: var(--font-size-default);
  -webkit-overflow-scrolling: touch;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-reg);
  line-height: 1.625;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* It's better to add this when necessary than constantly remove it */
a {
  text-decoration: none;
  color: var(--brand);
}

/* HashiCorp-style headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-kerning: normal;
}

h1 {
  font-size: 2.125rem;
  letter-spacing: -0.008em;
  line-height: 1.265em;

  @media (--medium-up) {
    font-size: 2.625rem;
    letter-spacing: -0.01em;
    line-height: 1.19em;
  }

  @media (--large) {
    font-size: 3.125rem;
    line-height: 1.2em;
  }
}

h2 {
  font-size: 1.75rem;
  letter-spacing: -0.004em;
  line-height: 1.286em;
  margin: 1em 0;

  @media (--medium-up) {
    font-size: 2.125rem;
    letter-spacing: -0.008em;
    line-height: 1.265em;
  }

  @media (--large) {
    font-size: 2.5rem;
    letter-spacing: -0.01em;
    line-height: 1.25em;
  }
}

h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  letter-spacing: -0.004em;
  line-height: 1.375em;
  margin: 1em 0;

  @media (--medium-up) {
    font-size: 1.75rem;
    line-height: 1.321em;
  }

  @media (--large) {
    font-size: 2rem;
    letter-spacing: -0.006em;
    line-height: 1.313em;
  }
}

h4 {
  font-size: 1.313rem;
  line-height: 1.429em;

  @media (--medium-up) {
    font-size: 1.438rem;
    letter-spacing: -0.004em;
    line-height: 1.391em;
  }

  @media (--large) {
    font-size: 1.5rem;
    line-height: 1.417em;
  }
}

h5 {
  font-size: 1.125rem;
  line-height: 1.556em;
}

h6 {
  font-size: 1rem;
  line-height: 1.5em;
}

/* Reasonable defaults for code blocks */
pre code,
code,
pre {
  font-family: var(--font-monospace);
  font-weight: var(--font-weight-reg);
  font-size: 0.844rem;
  line-height: 1.63em;
}

pre {
  background-color: var(--DEPRECATED-gray-2);
  color: var(--white);
  margin: 0 0 16px;
  padding: 24px 16px;
  overflow: auto;

  @media (--large) {
    padding: 32px 24px;
  }

  & > code {
    font: inherit;
    color: inherit;
    overflow-wrap: normal;
    white-space: pre;
  }
}

/* Reasonable defaults for horizontal rules */
hr {
  height: 1px;
  border: none;
  color: var(--DEPRECATED-gray-8);
  background-color: var(--DEPRECATED-gray-8);
}

/* Utility class that stops body scroll */
/* Used by:
    - hashicorp-www-next Nav
    - consent-manager
*/
.g-noscroll {
  overflow: hidden;
}