/*
  --- GENERAL ---
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Atkinson Hyperlegible Next", sans-serif;
}
html {
  --color-primary: oklch(0.7918 0.1143 78.46);
  --color-bg: oklch(0.995 0 0);
  --color-fg: oklch(0.175 0 0);
  --color-gray-900: oklch(0.2 0 0);
  --color-gray-850: oklch(0.25 0 0);
  --color-gray-800: oklch(0.3 0 0);
  --color-gray-750: oklch(0.35 0 0);
  --color-gray-700: oklch(0.4 0 0);
  --color-gray-650: oklch(0.45 0 0);
  --color-gray-600: oklch(0.5 0 0);
  --color-gray-550: oklch(0.55 0 0);
  --color-gray-500: oklch(0.6 0 0);
  --color-gray-450: oklch(0.65 0 0);
  --color-gray-400: oklch(0.7 0 0);
  --color-gray-350: oklch(0.75 0 0);
  --color-gray-300: oklch(0.8 0 0);
  --color-gray-250: oklch(0.85 0 0);
  --color-gray-200: oklch(0.9 0 0);
  --color-gray-150: oklch(0.95 0 0);
  --color-gray-100: oklch(0.975 0 0);

  --font-4xl: 4rem;
  --font-3xl: 3rem;
  --font-2xl: 2rem;
  --font-xl: 1.5rem;
  --font-lg: 1.25rem;
  --font-md: 1rem;
  --font-sm: 0.875rem;
  --font-xs: 0.75rem;
  --font-2xs: 0.625rem;
  --font-3xs: 0.5rem;

  --weight-x-bold: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;
  --weight-x-light: 200;

  --breakpoint-mobile: 20rem;
  --breakpoint-tablet: 34.375rem;
  --breakpoint-laptop: 68.75rem;
  --breakpoint-desktop: 93.75rem;

  --space-5xl: 4rem;
  --space-4xl: 3.5rem;
  --space-3xl: 3rem;
  --space-2xl: 2.5rem;
  --space-xl: 2rem;
  --space-lg: 1.5rem;
  --space-md: 1rem;
  --space-sm: 0.75rem;
  --space-xs: 0.5rem;
  --space-2xs: 0.25rem;

  --radius-full: 50%;
  --radius-3xl: 2rem;
  --radius-2xl: 1.75rem;
  --radius-xl: 1.5rem;
  --radius-lg: 1.25rem;
  --radius-md: 1rem;
  --radius-sm: 0.75rem;
  --radius-xs: 0.5rem;
  --radius-2xs: 0.25rem;

  scrollbar-color: var(--color-gray-300) var(--color-bg);
}
html.dark {
  --color-bg: oklch(0.175 0 0);
  --color-fg: oklch(0.995 0 0);

  scrollbar-color: var(--color-gray-600) var(--color-bg);
}
::selection {
  background-color: var(--color-primary);
  color: var(--color-fg);
}
html.dark ::selection {
  color: var(--color-bg);
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
}
.wrapper {
  max-width: var(--breakpoint-laptop);
  margin: 0 auto;
}
a {
  color: var(--color-gray-700);
  text-decoration: none;
}
html.dark a {
  color: var(--color-gray-300);
}
ul {
  list-style-type: none;
}
ol {
  margin-left: 1rem;
}
main {
  padding: 1.5rem;
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
}

/*
  --- HEADER ---
*/
nav {
  padding: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 2rem;
  height: 2rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}
.app-name {
  font-family: "Fira Sans", sans-serif;
  font-size: var(--font-lg);
  color: var(--color-fg);
}
nav .left,
nav .right {
  display: flex;
  align-items: center;
}
nav .left {
  gap: var(--space-xs);
}
nav .right {
  gap: var(--space-xl);
}
.header-buttons {
  display: flex;
  gap: var(--space-xs);
}
.navigation-links {
  display: flex;
  gap: var(--space-xl);
}
.theme-toggle,
.menu-button {
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background-color: transparent;
  border-radius: var(--radius-full);
  border: 4px solid transparent;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.theme-toggle:hover,
.menu-button:hover {
  background-color: var(--color-gray-150);
  border-color: var(--color-gray-150);
}
html.dark .theme-toggle:hover,
html.dark .menu-button:hover {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-800);
}
.theme-toggle-icon,
.menu-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-gray-600);
  stroke: var(--color-gray-600);
}
html.dark .theme-toggle-icon,
html.dark .menu-icon {
  color: var(--color-gray-300);
  stroke: var(--color-gray-300);
}
.menu-button {
  display: none;
}

/*
  --- FOOTER ---
*/
footer {
  padding: var(--space-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-gray-700);
}
html.dark footer {
  color: var(--color-gray-300);
}
footer .developer {
  margin-left: var(--space-xs);
  color: var(--color-fg);
  text-decoration: underline;
}
html.dark footer .developer {
  color: var(--color-primary);
}
footer .developer:hover {
  text-decoration: none;
}

/*
  --- MAIN ---
*/
main.main-recipe {
  padding: 1.5rem 2rem 2rem;
}
.description-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.description {
  max-width: 22rem;
  text-align: center;
  color: var(--color-gray-700);
  line-height: 1.5;
}
html.dark .description {
  color: var(--color-gray-300);
}

/*
  --- RECIPE ---
*/
.recipe-wrapper {
  max-width: var(--breakpoint-tablet);
  width: 100%;
}
.recipe-heading {
  margin-bottom: calc(var(--space-sm) - 1.25rem);
  font-weight: 800;
  color: var(--color-fg);
  text-align: center;
  text-transform: uppercase;
}
html.dark .recipe-heading {
  color: var(--color-primary);
}
img.ramen {
  margin: var(--space-lg) 0;
  height: auto;
  width: 100%;
  border-radius: var(--radius-3xl);
}
.recipe-section {
  margin-bottom: var(--space-md);
}
.recipe-section > h2 {
  margin-bottom: var(--space-xs);
  color: var(--color-fg);
}
.recipe-section > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-left: var(--space-lg);
  list-style-type: disc;
}
.recipe-section > ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-left: var(--space-lg);
}
.recipe-section li {
  color: var(--color-gray-600);
}
html.dark .recipe-section li {
  color: var(--color-gray-300);
}

/*
  --- HOME ---
*/
.redirect-button {
  padding: var(--space-xs) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: var(--color-gray-100);
  color: var(--color-fg);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--space-sm);
  font-size: var(--font-md);
  cursor: pointer;
}
html.dark .redirect-button {
  background-color: var(--color-gray-900);
  border: 1px solid var(--color-gray-800);
}
.redirect-button:hover {
  background-color: var(--color-gray-150);
}
html.dark .redirect-button:hover {
  background-color: var(--color-gray-850);
}
.redirect-button:hover > svg {
  transform: translateX(3px);
}
.redirect-button > svg {
  height: 1rem;
  stroke-width: 2;
  transition: 0.2s ease-in-out;
}

/*
  --- RECIPES ---
*/
.recipe-links-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.recipe-link {
  color: var(--color-fg);
  text-decoration: underline;
}
html.dark .recipe-link {
  color: var(--color-fg);
}
.recipe-link:hover {
  text-decoration: none;
}

/*
  --- MODAL ---
*/
.modal {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-fg);
  display: none;
  place-items: center;
}
.close-modal-button {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  color: var(--color-fg);
  border: none;
  cursor: pointer;
}
.modal ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}
.modal li {
  font-weight: var(--weight-bold);
  font-size: var(--font-xl);
}
.modal > ul > li > a {
  color: var(--color-fg);
}
.modal > ul > li > a:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

@media (max-width: 34.375rem) {
  .recipe-links-wrapper {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .navigation-links {
    display: none;
  }
  .menu-button {
    margin-left: 4px;
    display: grid;
    border: none;
  }
  .menu-button:hover,
  html.dark .menu-button:hover {
    background-color: var(--color-bg);
  }
}