/* Basic typographical styles */

/**
 * All font sizes are based on 16px base font size and 1920px wide screen
 * Default size is expressed as percentage of screen width.
 * text-14px: 12px-27px, default: 14px
 * text-16px: 14px-28px, default: 16px
 * text-18px: 14px-30px, default: 18px
 * text-20px: 16px-32px, default: 20px
 * text-22px: 17px-33px, default: 22px
 * text-25px: 18px-35px, default: 25px
 * text-30px: 19px-37px, default: 30px
 * text-35px: 20px-40px, default: 35px
 * text-38px: 22px-48px, default: 38px
 * text-40px: 24px-56px, default: 40px
 * text-45px: 25px-64px, default: 45px
 * text-50px: 27px-72px, default: 50px
 * text-55px: 28px-76px, default: 55px
 * text-60px: 30px-80px, default: 60px
 * text-70px: 30px-76px, default: 70px
 * text-75px: 32px-80px, default: 75px
*/

@theme {
  --font-sans:   "Raleway", sans-serif;
  --line-height: 1.6;

  --text-base: 1rem;
  --text-14px: clamp(0.75rem,  0.7292vw, 1.7rem);
  --text-16px: clamp(0.875rem, 0.8333vw, 1.8rem);
  --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
  --text-20px: clamp(1rem,     1.0417vw, 2rem);
  --text-22px: clamp(1.1rem,   1.15vw,   2.1rem);
  --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
  --text-30px: clamp(1.185rem, 1.5625vw, 2.35rem);
  --text-35px: clamp(1.25rem,  1.8229vw, 2.5rem);
  --text-38px: clamp(1.4rem,   1.9791vw, 3rem);
  --text-40px: clamp(1.5rem,   2.0834vw, 3.5rem);
  --text-45px: clamp(1.6rem,   2.3438vw, 4rem);
  --text-50px: clamp(1.7rem,   2.6042vw, 4.5rem);
  --text-70px: clamp(1.9rem,   3.6458vw, 4.8rem);
  --text-75px: clamp(2rem,     3.9063vw, 5rem);

  --h1: calc(var(--text-base) * 2.25);
  --h2: calc(var(--text-base) * 1.75);
  --h3: calc(var(--text-base) * 1.5);
  --h4: calc(var(--text-base) * 1.25);
  --h5: calc(var(--text-base) * 1.125);
  --h6: calc(var(--text-base) * 1.05);
}

body {
  background-color: white;
  color: black;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height);
}

::selection { background: var(--color-warning); }

@layer components {
  h1, h2, h3,
  h4, h5, h6 {
    font-weight: 700;
    margin: 0 0 1rem;
  }

  h1, .h1 {
    font-size: var(--h1);
    line-height: 1.2;
  }

  h2, .h2 {
    font-size: var(--h2);
    line-height: 1.3;
  }

  h3, .h3 {
    font-size: var(--h3);
    line-height: 1.4;
  }

  h4, .h4 {
    font-size: var(--h4);
    line-height: 1.5;
  }

  h5, .h5 { font-size: var(--h5); }

  h6, .h6 { font-size: var(--h6); }
}

a, .link {
  color: var(--color-info);
  text-decoration: none;
  transition: color 200ms;
  cursor: pointer;

  &:hover { color: var(--color-primary); }
}

h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
  color: inherit;
  text-decoration: underline;
}

#site_head h1 a {
  @apply text-white text-40px hover:text-primary-200;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

li ul, li ol { margin: 0 1rem; }

ul { list-style-type: disc; }

ol { list-style-type: decimal; }

ol ol { list-style: lower-alpha; }

ol ol ol { list-style: lower-roman; }

ol ol ol ol { list-style: lower-alpha; }

pre, code,
samp, style { font-family: monospace; }

pre {
  font-size: 0.875rem;
  overflow: auto;
  padding: 1.5rem;
}

pre code {
  background-color: inherit;
  border-radius: 0;
  color: inherit;
  padding: 0;
}

code {
  @apply bg-black/40 px-[3px] py-[2px] font-mono text-light text-xs rounded-sm;
}

hr {
  background-color: black;
  border: none;
  display: block;
  height: 1px;
  margin: 1rem 0;
  width: 100%;
}