@layer resets, theme, base, components;

@layer resets {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }


  @view-transition {
    navigation: auto;
  }

  @media screen and (prefers-reduced-motion: reduce), (update: slow) {
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    @view-transition {}
  }

  html {
    scrollbar-gutter: stable;
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }
}

@layer theme {
  @font-face {
    font-family: "Scorekard-Regular";
    src: url("/fonts/Scorekard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Scorekard-SemiBold";
    src: url("/fonts/Scorekard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: "Scorekard-Bold";
    src: url("/fonts/Scorekard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }

  :root {
    font-family: system-ui, sans-serif;
    --code-bg: #272822;

    --color-text-primary: black;
    --color-text-secondary: #333;
    --color-blue: oklch
    --background-primary: white;

    --springy: linear(
      0,
      0.03 1.5%,
      0.121 3.2%,
      0.851 13%,
      0.99 16.4%,
      1.063 20.2%,
      1.076 22.3%,
      1.075 24.8%,
      1.013 35.9%,
      0.995 43.4%,
      1
    );

    --font-skorekard-regular: "Scorekard-Regular", system-ui, sans-serif;
    --font-skorekard-semibold: "Scorekard-SemiBold", system-ui, sans-serif;

    --with-gutter: 2/4;
    --primary-content: 2/3;
    --full-bleed: 1/-1;

    @media (prefers-color-scheme: dark) {
      --color-text-primary: white;
      --color-text-secondary: #ddd;
      --background-primary: black;
    }
  }
}

@layer base {
  body {
    --content-max-width: 75ch;
    background-color: var(--background-primary);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(1rem, 1fr) minmax(0, var(--content-max-width)) 1fr minmax(
        1rem,
        1fr
      );
    grid-template-areas:
      ". navigation navigation ."
      "content content content content"
      "footer footer footer footer";
    @media (min-width: 1200px) {
      column-gap: 3rem;
      grid-template-areas:
        ". content navigation ."
        ". content navigation ."
        "footer footer footer footer";
    }
  }

  main {
    grid-area: content;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    & * {
      grid-column: var(--primary-content);
    }
    @supports (grid-template-columns: subgrid) {
      grid-template-columns: subgrid;
    }
  }

  footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: subgrid;
    padding-block: 1rem;
    & * {
      grid-column: var(--with-gutter);
    }
  }

  p,
  li {
    font-size: 1.25rem;
    margin-block: 1rem;
  }

  h1 + p,
  h2 + p {
    margin-block-start: 0;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  span,
  small,
  li,
  a {
    color: var(--color-text-primary);
  }

  h1,
  h2,
  h3,
  h4 {
    margin-block: 1rem;
    line-height: 1;
    font-family: var(--font-skorekard-semibold);
  }

  h1 {
    container-type: inline-size;
    font-size: clamp(2rem, 4cqi, 5rem);
  }

  h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }

  h1 a,
  h2 a {
    color: inherit;
    text-decoration: none;
    &[href^="#"] {
      &:hover {
        text-decoration: underline;
        cursor: pointer;
        opacity: 0.8;
        &::after {
          content: "#";
          margin-inline-start: 0.5rem;
        }
      }
    }
  }

  h2.subtitle {
    margin-block-start: 0;
    margin-block-end: 2rem;
  }

  pre {
    padding: 1rem;
    border-radius: 0.25rem;
    margin-block-end: 1rem;
    overflow: auto hidden;
    background-color: var(--code-bg);
  }

  hr {
    margin-block: 2rem;
  }

  small {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  a {
    &:hover, &:focus-visible {
      opacity: 0.8;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--color-text-primary);
      transition: all 0.5s var(--springy);
    }
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    text-decoration-color: #757575;
  }

  a, button, input, select, textarea {
    &:focus-visible {
      outline: 2px solid;
      outline-offset: 2px;
      outline-color: var(--color-text-primary);
    }
  }
}

@layer components {
  .navigation {
    grid-area: navigation;
    margin-block-start: 1rem;
    @media (min-width: 1200px) {
      margin-inline-end: 1rem;
      & .sticky-aside {
        max-width: fit-content;
        position: sticky;
        top: 1rem;
      }
      & .nav-links {
        flex-direction: column;
      }
    }
  }

  .nav-links, .post-links {
    list-style: none;
    padding: 0;
    & li {
      margin: 0;
    }
  }

  .nav-links {
    display: flex;
    gap: 0.5rem;
    margin-block: 1rem;
  }

  .post-links  {
    & time, h2 {
      font-family: var(--font-skorekard-regular);
      font-weight: 400;
    }
    & time {
      font-size: clamp(0.875rem, 2vw, 1.5rem);
      color: var(--color-text-secondary);
      display: block;
    }
  }

  .barney-link {
    display: block;
    font-size: 2rem;
    text-decoration: none;
    font-family: var(--font-skorekard-regular);
    width: max-content;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .skip-link {
    color: white;
    background-color: black;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem;
    font-weight: bold;
    z-index: 2;
    &:focus {
      height: auto;
      width: auto;
      clip: auto;
    }
  }

  @property --color-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #000;
  }

  @property --color-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #000;
  }

  @keyframes color-change {
    to {
      --color-1: var(--_color-1-to);
      --color-2: var(--_color-2-to);
    }
  }

  .gradient-background {
    --_space: ;
    --_color-1-from: oklch(0.7041 0.16562500000000002 250);
    --_color-1-to: oklch(0.7256 0.16562500000000002 320);
    --_color-2-from: oklch(0.6826 0.16562500000000002 180);
    --_color-2-to: oklch(0.7041 0.16562500000000002 250);

    --color-1: var(--_color-1-from);
    --color-2: var(--_color-2-from);

    animation: color-change auto linear;
    animation-timeline: scroll();
    background: linear-gradient(to right in oklch, var(--color-1), var(--color-2));

    @supports (background: linear-gradient(in oklch, #fff, #fff)) {
      --_space: in oklch;
    }

    height: 1.5rem;
  }
}