@layer reset, theme, base, layout, components, utilities;
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap') layer(theme);

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

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

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
  }
}

@layer theme {
  :root {
    color-scheme: light dark;

    --bg: #fafafa;
    --surface: #fafafa;
    --text: #111111;
    --muted: #6d6d6d;
    --accent: #111111;
    --border: #111111;
    --selection-bg: #111111;
    --selection-text: #fafafa;

    --font: 'Space Grotesk', 'Helvetica Neue', sans-serif;
    --size-step-0: clamp(0.92rem, 0.5vw + 0.8rem, 1rem);
    --space-1: clamp(0.4rem, 0.6vw, 0.8rem);
    --space-2: clamp(0.8rem, 1vw, 1.2rem);
    --space-3: clamp(1.4rem, 2vw, 2.2rem);
    --radius-1: 0px;
    --radius-2: 0px;
    --border-weight: 1px;
    --ease-snappy: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  [data-theme='dark'] {
    color-scheme: dark;

    --bg: #111111;
    --surface: #111111;
    --text: #f2f2f0;
    --muted: #a3a3a3;
    --accent: #f2f2f0;
    --border: #f2f2f0;
    --selection-bg: #f2f2f0;
    --selection-text: #111111;
  }

  [data-theme='light'] {
    color-scheme: light;
  }
}

@layer base {
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }

  html {
    height: 100%;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100svh;
    min-height: 100dvh;
    font-family: var(--font);
    font-size: var(--size-step-0);
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
  }

  body::before {
    content: none;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: var(--border-weight) solid var(--accent);
    outline-offset: 3px;
  }
}

@layer layout {
  main {
    position: relative;
    z-index: 1;
    width: min(100%, 24rem);
    container-type: inline-size;
    container-name: shell;
    display: grid;
    gap: calc(var(--space-3) + 0.6rem);
  }

  @scope (main) {
    header {
      display: grid;
      gap: 0.35rem;
    }

    h1 {
      font-size: clamp(1.8rem, 4.8vw, 2.6rem);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.1;
    }

    .tagline {
      font-size: 0.9rem;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0.02em;
    }

    nav {
      display: grid;
      gap: 0.5rem;
    }

    footer {
      margin-top: 0.5rem;
      padding-top: var(--space-1);
      border-top: var(--border-weight) solid var(--border);
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
  }
}

@layer components {
  .theme-toggle {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: transparent;
    border: var(--border-weight) solid var(--border);
    border-radius: var(--radius-2);
    transition: transform 0.3s var(--ease-snappy), background-color 0.3s var(--ease-snappy);
  }

  .theme-toggle:hover {
    transform: translateY(-2px);
  }

  .theme-toggle:active {
    transform: translateY(0);
  }

  .theme-toggle svg {
    width: 18px;
    height: 18px;
    color: var(--text);
  }

  .icon-sun {
    display: none;
  }

  .icon-moon {
    display: block;
  }

  [data-theme='light'] .icon-sun {
    display: block;
  }

  [data-theme='light'] .icon-moon {
    display: none;
  }

  @scope (main) {
    nav a {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0;
      font-size: 0.92rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--text);
      text-decoration: none;
      border-bottom: var(--border-weight) solid transparent;
      transition: color 0.3s var(--ease-snappy), border-color 0.3s var(--ease-snappy);
    }

    nav a:hover,
    nav a:focus-visible {
      border-color: var(--border);
    }

    nav a .arrow {
      display: none;
    }

    footer a {
      font-size: 0.85rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--muted);
      text-decoration: none;
      border-bottom: var(--border-weight) solid transparent;
      transition: color 0.3s var(--ease-snappy), border-color 0.3s var(--ease-snappy);
    }

    footer a:hover,
    footer a:focus-visible {
      color: var(--text);
      border-color: var(--border);
    }
  }
}

@layer utilities {
  @container shell (width > 520px) {
    @scope (main) {
      nav {
        gap: 1rem;
      }

      nav a {
        font-size: 0.95rem;
      }

      footer {
        gap: 1rem;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media (width <= 480px) {
    body {
      padding: var(--space-2);
    }

    .theme-toggle {
      top: 1rem;
      right: 1rem;
      width: 34px;
      height: 34px;
    }
  }
}