:root {
  color-scheme: light dark;

  &:has(#theme:checked) {
    color-scheme: dark;
  }

  &:not(:has(#theme:checked)) {
    color-scheme: light;
  }

  --color--background: light-dark(#F9F8F6, #18161D);
  --color--background--image: light-dark(#F1EEEA, #26232E);
  --color--text: light-dark(#0b0b0b, #e9e9ec);
  --color--border: light-dark(#0b0b0b, #e9e9ec);
  --color--link: light-dark(#7931FF, #FFDB60);
  --color--link--hover: light-dark(rgba(121, 49, 255, 0.12), rgba(255, 219, 96, 0.18));
  --color--path-stroke: light-dark(rgba(255, 219, 96, 0.7), rgba(121, 49, 255, 0.45));
  --color--outline: light-dark(#2C80F6, #3A8CFF);

  --font-size--sm: 14px;
  --font-size--base: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
  --font-size--md: clamp(1.25rem, 0.45vi + 1.14rem, 1.5rem);
  --font-size--lg: clamp(1.75rem, 0.625vi + 1.625rem, 2.1875rem);
  --font-size--xl: clamp(2.125rem, 0.982vi + 1.929rem, 2.8125rem);
  --font-size--xxl: clamp(3.625rem, 1.5vi + 3.125rem, 4.5rem);

  --size--max-content-width: 1296px;

  --border-radius--sm: 6px;
  --border-radius--md: 8px;
  --border-radius--lg: 12px;

  --spacing-block--sm: 12px;
  --spacing-block--md: 16px;
  --spacing-block--lg: 24px;

  --spacing-inline--md: 16px;
}

@font-face {
  font-family: 'Aktiv';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/aktivgrotesk-regular.woff2') format('woff2'),
       url('/fonts/aktivgrotesk-regular.woff') format('woff');
}

@font-face {
  font-family: 'Aktiv';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/aktivgrotesk-medium.woff2') format('woff2'),
       url('/fonts/aktivgrotesk-medium.woff') format('woff');
}

@font-face {
  font-family: 'Aktiv';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/aktivgrotesk-bold.woff2') format('woff2'),
       url('/fonts/aktivgrotesk-bold.woff') format('woff');
}

@font-face {
  font-family: 'Aktiv';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/aktivgrotesk-black.woff2') format('woff2'),
       url('/fonts/aktivgrotesk-black.woff') format('woff');
}

html, body {
  background: var(--color--background);
  color: var(--color--text);
}

body {
  font-family: 'Aktiv', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: var(--font-size--base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: var(--font-size--xxl);
  font-weight: 600;
  line-height: 1.1em;
}

h2 {
  margin-bottom: 24px;
  font-size: var(--font-size--md);
  font-weight: 500;
}

h3 {
  font-size: var(--font-size--base);
  font-weight: 500;
  line-height: 1.4em;

  span {
    font-weight: 400;
  }
}

p {
  font-size: var(--font-size--base);
  font-weight: 400;
  line-height: 1.5em;
}

a {
  display: inline-block;
  padding-right: 4px;
  padding-bottom: 4px;
  background-image: linear-gradient(
    0deg,
    transparent 0%,
    var(--color--link--hover) 0%,
    var(--color--link--hover) 60%,
    transparent 60%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  color: var(--color--link);
  transition: color 0.2s ease, background-size 0.3s ease, color 0.3s ease;

  &.inverted {
    padding-left: 4px;
    background-position: right bottom;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  &:hover {
    background-size: calc(100% + 12px) 100%;
  }
}

main {
  width: 100%;
  max-width: var(--size--max-content-width);
  padding: 40px;
  margin: 0 auto;
  overflow: hidden;

  @media (max-width: 640px) {
    padding: 16px 24px;
  }
}

footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-block--sm);
  max-width: var(--size--max-content-width);
  padding: 32px 40px;
  margin: 0 auto;
  font-size: var(--font-size--sm);

  @media (max-width: 640px) {
    padding: 32px 24px 16px;
  }

  span {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: var(--color--border);
    opacity: 0.4;
  }

  a {
    margin-bottom: -4px;
    font-weight: 500;
  }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.themeSwitch {
  display:inline-flex;
  align-items:center;
  gap: 0.6rem;
  cursor:pointer;
  user-select:none;

  .track {
    position:relative;
    inline-size: 36px;
    block-size: 20px;
    background: #FFDB60;
    border-radius: 999px;
    transition: background 0.2s ease;
  }

  .thumb {
    position:absolute;
    inset: 4px auto 4px 4px;
    inline-size: 12px;
    block-size: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce){
    .track, .thumb { transition: none; }
  }

  .sun, .moon{
    position:absolute;
    top: 50%;
    inline-size: 18px;
    block-size: 18px;
    opacity: 0.9;
    transform: translateY(-50%);
  }

  .sun {
    background: url('/images/sun.svg') center no-repeat;
    background-size: 11px;
    right: 0;
  }

  .moon {
    background: url('/images/moon.svg') center no-repeat;
    background-size: 11px;
    left: 1px;
  }
}

input[type='checkbox'] {
  position:absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.themeSwitch input:checked + .track{
  background: #7931FF;
}

.themeSwitch input:checked + .track .thumb{
  transform: translateX(16px);
}

.themeSwitch input:focus-visible + .track{
  outline: 2px solid var(--color--outline);
  outline-offset: 2px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 40px;
  max-width: var(--size--max-content-width);
  margin: 0 auto;

  @media (max-width: 640px) {
    padding: 16px 24px;
  }

  h1 {
    font-size: var(--font-size--base);
  }

  a {
    font-size: var(--font-size--base);
    font-weight: 600;
    line-height: 1.2em;
    color: var(--color--text);

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

  span {
    font-weight: 400;
  }
}