@import url('./fonts/fonts.css');

:root {
  --opacity-text: 0.8;
  --width-main: 100vw;
  --spacing: 1.5rem;
  --lr-spacing: calc(var(--spacing) / 4);

  --trans-func: cubic-bezier(0.4, 0, 0.2, 1);
  --trans-color: color 150ms var(--trans-func),
    border-color 150ms var(--trans-func), box-shadow 150ms var(--trans-func),
    background-color 150ms var(--trans-func);

  --var-font-sans-heading: sans-serif;
  --var-font-sans-body: sans-serif;
  --var-font-mono: 'Fira Code', monospace;

  /* Font Sizes */
  --fs-4xl: 2.25rem;
  --fs-3xl: 1.875rem;
  --fs-2xl: 1.5rem;
  --fs-xl: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.835rem;
  --fs-xs: 0.75rem;

  /* Post Specific */
  --mt-common: 1rem;
  --mb-common: 1.25rem;
  --lh-p: calc(var(--fs-base) * 1.4);
  --border: 1px solid var(--color-border);
}

[data-theme='light'] {
  --color-heading: hsl(280, 15%, 20%);
  --color-text: hsl(264, 15%, 20%);

  --color-accent-light: hsl(266, 4%, 56%);
  --color-accent: hsl(263, 3%, 46%);

  --color-bg-light: hsl(60, 9%, 99%);
  --color-bg: hsl(60, 9%, 98%);

  --color-border: hsl(265, 17%, 86%);

  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.03), 0 0px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.11);
}

[data-theme='dark'] {
  --color-heading: hsl(270, 7%, 85%);
  --color-text: hsl(270, 7%, 85%);

  --color-accent-light: hsl(270, 85%, 90%);
  --color-accent: hsl(270, 65%, 75%);

  --color-bg-light: hsl(270, 4%, 13%);
  --color-bg: hsl(270, 3%, 11%);

  --color-border: hsl(270, 8%, 25%);

  --shadow-md: 0px 2px 10px hsla(270, 8%, 5%, 0.6);
  --shadow-lg: 0px 12px 40px hsla(270, 8%, 5%, 0.9),
    0px -12px 20px hsl(263, 11%, 15%, 0.6);
}

* {
  margin: 0px;
}

*:focus-visible {
  outline: 1px solid var(--color-accent);
}

html {
  font-size: 16px;
  font-family: var(--var-font-sans-body);

  background-color: var(--color-bg);
  color: var(--color-text);
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--var-font-sans-heading);
}

html,
code,
blockquote,
pre,
details,
a {
  transition: var(--trans-color);
}

pre,
code,
nav > a {
  font-family: var(--var-font-mono);
}

a {
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid var(--color-text);
}

a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

body {
  width: var(--width-main);
  min-width: 300px;
  min-height: 100vh;
  height: fit-content;
  box-sizing: border-box;
  margin: 0px auto;
  padding: 0px var(--lr-spacing);
}

nav {
  position: sticky;
  top: 0px;
  overflow: hidden;

  display: flex;
  align-items: center;
  gap: calc(var(--spacing) / 2);
  z-index: 10;

  background-color: var(--color-bg);
  transition: color 150ms var(--trans-func),
    background-color 150ms var(--trans-func), box-shadow 150ms var(--trans-func),
    border-color 150ms var(--trans-func);

  font-size: var(--fs-sm);

  padding: calc(var(--spacing) / 3) 0;
  border-bottom: 1px dashed var(--color-border);

  /* prevent shadow leak (of below element) from the sides */
  box-shadow: 0px -12px 0px 12px var(--color-bg);
}

nav > a {
  border-bottom: none;
  color: var(--color-text);
  transition: color 150ms var(--trans-func);
}

nav > a:hover {
  color: var(--color-accent);
}

nav > button {
  background: transparent;
  padding: 0;
  margin: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 100px;
}

nav img {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

nav > button:focus {
  filter: none;
}

[data-theme='light'] nav img {
  filter: brightness(0.5) saturate(0);
}

@media only screen and (min-width: 664px) {
  :root {
    --width-main: 600px;
    --spacing: 2rem;
  }

  html {
    font-size: 16px;
  }

  body {
    padding: 0;
  }
}

@media only screen and (min-width: 1024px) {
  :root {
    --width-main: 800px;
    --spacing: 2rem;
  }

  html {
    font-size: 16px;
  }

  body {
    padding: 0;
  }
}