@layer components {
  /* Styleguide reference page — dev only */

  .styleguide {
    padding-block: var(--space-8);

    & section {
      margin-block-start: var(--space-8);
    }

    & h2 {
      margin-block-end: var(--space-4);
      padding-block-end: var(--space-2);
      border-block-end: 1px solid var(--color-border);
    }

    & h3 {
      margin-block: var(--space-4) var(--space-2);
    }
  }

  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-4);
  }

  .swatch {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }

  .swatch__color {
    height: 5rem;
  }

  .swatch__label {
    padding: var(--space-2);
    font-size: var(--font-size-small);
    line-height: 1.4;

    & code {
      display: block;
      font-size: var(--font-size-caption);
      color: var(--color-text-muted);
    }
  }

  .spacing-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-2);

    & code {
      min-width: 10ch;
      font-size: var(--font-size-small);
    }
  }

  .spacing-bar {
    background: var(--color-primary);
    height: var(--space-4);
    border-radius: var(--radius-sm);
  }

  .radius-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: end;
  }

  .radius-sample {
    width: 5rem;
    height: 5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    font-size: var(--font-size-caption);
  }

  .shadow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .shadow-sample {
    width: 10rem;
    height: 6rem;
    background: var(--color-canvas);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: var(--font-size-small);
  }

  /* Component showcase helpers */
  .component-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-4);
  }
}