@layer base, theme;

@layer base {
  html {
    color-scheme: light dark;
    box-sizing: border-box;
  }

  body,
  main,
  h1,
  p,
  svg {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    font-family: system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    background: var(--canvas);
    color: var(--ink);
  }

  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    max-inline-size: 36rem;
    margin-inline: auto;
    padding-block: 3rem;
    padding-inline: 1.5rem;
  }

  h1 {
    margin: 0;
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  p {
    margin: 0.75rem 0 0;
    max-inline-size: 32ch;
    color: var(--muted);
  }

  .status {
    margin-block-start: 1.5rem;
    color: var(--accent);
    font-weight: 600;
  }

  .mark {
    display: block;
    margin-block-end: 1.5rem;
    fill: var(--accent);
  }
}

@layer theme {
  :root {
    color-scheme: light dark;
    --ink-light: oklch(24% 0.02 255);
    --ink-dark: oklch(96% 0.01 255);
    --muted-light: oklch(42% 0.02 255);
    --muted-dark: oklch(80% 0.02 255);
    --canvas-light: oklch(98% 0.005 255);
    --canvas-dark: oklch(18% 0.02 260);
    --accent-light: oklch(46% 0.14 255);
    --accent-dark: oklch(78% 0.11 255);
    --ink: var(--ink-light);
    --muted: var(--muted-light);
    --canvas: var(--canvas-light);
    --accent: var(--accent-light);

    @media (prefers-color-scheme: dark) {
      --ink: var(--ink-dark);
      --muted: var(--muted-dark);
      --canvas: var(--canvas-dark);
      --accent: var(--accent-dark);
    }

    @supports (color: light-dark(white, black)) {
      --ink: light-dark(var(--ink-light), var(--ink-dark));
      --muted: light-dark(var(--muted-light), var(--muted-dark));
      --canvas: light-dark(var(--canvas-light), var(--canvas-dark));
      --accent: light-dark(var(--accent-light), var(--accent-dark));
    }
  }
}