@layer tokens, base, layout, components;

@layer tokens {
  :root {
    color-scheme: dark;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --leading-xs: 1rem;
    --leading-sm: 1.25rem;
    --leading-base: 1.5rem;

    --color-canvas: #101113;
    --color-surface: #191b1f;
    --color-text: #e8e9eb;
    --color-muted: #90949c;
    --color-border: #42464e;
    --color-focus: #c3d4f4;
    --border-width: 1px;
    --radius-sm: var(--space-2);
    --radius-md: var(--space-3);
    --radius-lg: var(--space-4);
    --control-size: var(--space-12);
    --icon-size: var(--space-5);

    --container-max: 80rem;
    --page-gutter: var(--space-4);
    --grid-columns: 4;
    --grid-gap: var(--space-4);
  }

  @media (min-width: 48rem) {
    :root {
      --page-gutter: var(--space-6);
      --grid-columns: 8;
      --grid-gap: var(--space-6);
    }
  }

  @media (min-width: 80rem) {
    :root {
      --page-gutter: var(--space-8);
      --grid-columns: 12;
    }
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    overflow-wrap: anywhere;
  }

  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }

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

  img, svg, video {
    display: block;
    max-inline-size: 100%;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: var(--space-1);
  }
}

@layer layout {
  .container {
    inline-size: min(calc(100% - 2 * var(--page-gutter)), var(--container-max));
    margin-inline: auto;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .grid > * {
    min-inline-size: 0;
    grid-column: 1 / -1;
  }

  .viewport {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    padding-block: var(--space-6);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
}

@layer components {
  .wordmark {
    place-self: center;
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--leading-xs);
    letter-spacing: 0.16em;
    /* Balance the trailing letter space around the visible word. */
    padding-inline-start: 0.16em;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-inline-size: var(--control-size);
    min-block-size: var(--control-size);
    padding-block: calc(var(--space-3) - var(--border-width));
    padding-inline: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .button:disabled {
    color: var(--color-muted);
    cursor: default;
  }

  .icon {
    flex: none;
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
  }
}