@layer config, base, layout, theme, utilities;

@layer config {
  :root {
    --foreground-light: #222;
    --foreground-dark: #ddd;

    --background-light: #fafafa;
    --background-dark: #111;

    --ui-accent: hsl(22, 95%, 50%);
    --text-accent-light: hsl(20, 100%, 40%);
    --text-accent-dark: hsl(24, 85%, 60%);

    --foreground: var(--foreground-light);
    --background: var(--background-light);
    --text-accent: var(--text-accent-light);
    --outline: var(--text-accent-light);

    --font-family: monospace;
    --font-size: 1rem;

    --space: 1rem;
  }
}

@layer base {
  p {
    margin: 0 0 var(--space);
  }

  a {
    color: currentColor;
    font-weight: bold;
    text-decoration-color: var(--ui-accent);
    text-decoration-thickness: 0.3ex;
    text-underline-offset: 0.2ex;

    &:hover,
    &:focus {
      color: var(--text-accent);
    }
  }

  ins {
    text-decoration: none;
    font-style: italic;
  }

  del {
    opacity: 0.65;
  }

  ins,
  del {

    &::before,
    &::after {
      position: absolute;
      clip-path: inset(100%);
    }
  }

  ins {
    &::before {
      content: " [insert start] ";
    }

    &::after {
      content: " [insert end] ";
    }
  }

  del {
    &::before {
      content: " [delete start] ";
    }

    &::after {
      content: " [delete end] ";
    }
  }
}

@layer layout {
  body {
    display: grid;
    grid-template-rows: auto;
    min-block-size: 100dvh;
    margin: 0;

    main>.content {
      box-sizing: border-box;
      padding: var(--space);
    }
  }
}

@layer theme {
  :root {
    font-size: 12px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --foreground: var(--foreground-dark);
      --background: var(--background-dark);
      --text-accent: var(--text-accent-dark);
      --outline: var(--text-accent-dark);
    }
  }

  body {
    text-rendering: optimizeSpeed;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    color: var(--foreground);
    background: var(--background);
    font: var(--font-size) / 1.5 var(--font-family);

    main {
      display: grid;
      place-items: center;

      &>.content {
        max-inline-size: 444px;
      }
    }
  }
}

@layer utilities {
  *:focus-visible {
    outline: 0.25ex solid var(--outline);
    outline-offset: 0.1rem;
    text-decoration: none;
  }
}