@layer base, components, entities, modifier;

/* Google font */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

@import url(./components.css);
@import url(./entities.css);
@import url(./modifiers.css);

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :root {
    /* CONSTANTS */

    --gold: 1.618;

    /* LAYOUT */

    --page-max-width: 1200px;
    --page-header-height: 3rem;

    --padding-half: calc(var(--padding) * 0.5);
    --padding: 0.5rem;
    --padding-double: calc(var(--padding) * 2);

    --margin-half: calc(var(--margin) * 0.5);
    --margin: 0.5rem;
    --margin-double: calc(var(--margin) * 2);

    --border-width-half: calc(var(--border-width) / 2);
    --border-width: 0.25rem;
    --border-width-double: 0.5rem;
    --border-radius: 1rem;
    --border-radius-half: calc(var(--border-radius) * 0.5);

    --color-white: #fdfdfd;
    --color-white-1: #dfe6e9;
    --color-white-2: #b2bec3;
    --color-black-2: #636e72;
    --color-black-1: #2d3436;
    --color-black: #010101;

    /* White neutrals and black neutrals */

    --color-theme-white: light-dark(var(--color-white), var(--color-black));
    --color-theme-white-1: light-dark(
      var(--color-white-1),
      var(--color-black-1)
    );
    --color-theme-white-2: light-dark(
      var(--color-white-2),
      var(--color-black-2)
    );

    --color-theme-black: light-dark(var(--color-black), var(--color-white));
    --color-theme-black-1: light-dark(
      var(--color-black-1),
      var(--color-white-1)
    );
    --color-theme-black-2: light-dark(
      var(--color-black-2),
      var(--color-white-2)
    );

    /* Light hues and dark hues */

    --color-pink-l: #fd79a8;
    --color-red-l: #ff7675;
    --color-orange-l: #fab1a0;
    --color-yellow-l: #ffeaa7;
    --color-mint-l: #55efc4;
    --color-aqua-l: #81ecec;
    --color-blue-l: #74b9ff;
    --color-purple-l: #a29bfe;

    --color-pink-d: #e84393;
    --color-red-d: #d63031;
    --color-orange-d: #e17055;
    --color-yellow-d: #fdcb6e;
    --color-mint-d: #00b894;
    --color-aqua-d: #00cec9;
    --color-blue-d: #0984e3;
    --color-purple-d: #6c5ce7;
  }

  a {
    padding: var(--padding);

    display: grid;
    justify-content: center;
    align-content: center;

    color: var(--color-blue-d);
    /* background: var(); */
    border: none;
    border-radius: 2px;

    font-family: "JetBrains Mono", ui-monospace, monospace;

    cursor: pointer;
    text-decoration: none;

    transition: linear 0.1s;
  }

  body {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;

    color-scheme: dark;
    background-color: var(--color-black-1);

    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--color-white-1);

    @media screen and (min-width: 900px) {
      grid-template-columns: auto max(var(--page-max-width)) auto;
    }
  }

  button {
    padding: var(--padding);

    display: grid;
    justify-content: center;
    align-content: center;

    color: var(--color-theme-black);
    background: var(--color-theme-white-1);
    border: none;
    border-radius: 2px;

    font-family: "JetBrains Mono", ui-monospace, monospace;

    cursor: pointer;

    transition: linear 0.1s;

    @media screen and (min-width: 900px) {
      &:hover {
        color: var(--color-theme-white);
        background-color: var(--color-theme-black);
      }
    }

    @media screen and (max-width: 900px) {
      &:active {
        transition: none;
        color: var(--color-theme-white);
        background-color: var(--color-theme-black);
      }
    }
  }

  code {
    padding: calc(var(--padding-half) / 2) var(--padding);
    margin: 0;

    display: inline-grid;
    justify-items: center;
    align-items: center;

    background-color: var(--color-theme-white-1);
    border-radius: var(--border-radius-half);

    font-style: italic;

    > * {
      display: inline-grid;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    padding: var(--padding-half) var(--padding);
    margin: var(--margin-double) var(--margin) var(--margin-half);

    display: grid;

    border-bottom: 1px solid var(--color-theme-black-2);

    font-weight: bold;
  }

  header {
    display: flex;
    justify-content: space-around;
    align-self: center;
    align-content: center;
    overflow: visible;

    position: relative;
    top: 0;
    width: 100%;
    z-index: 100;

    margin-bottom: var(--margin-double);
    padding: var(--padding);
    padding-left: var(--padding-double);
    padding-right: var(--padding-double);

    font-size: larger;
  }

  hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--color-theme-black-2);
  }

  img {
    max-width: 100%;
    padding: var(--padding);
    margin: var(--margin);

    justify-self: center;
  }

  input::placeholder {
    color: var(--color-theme-black);
  }

  textarea::placeholder {
    color: var(--color-theme-black);
  }
}