@layer components {
  .btn {
    --btn-padding-block: 0.75em;
    --btn-padding-inline: 1.5em;
    --btn-border-radius: var(--border-radius-sm);
    --btn-background: var(--color-canvas);
    --btn-color: var(--color-ink);
    --btn-border: 1px solid var(--color-border);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space-half);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    background: var(--btn-background);
    color: var(--btn-color);
    border: var(--btn-border);
    border-radius: var(--btn-border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;

    &:hover {
      filter: brightness(0.95);
      text-decoration: none;
    }

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

    &:active {
      transform: translateY(1px);
    }
  }

  /* Primary (brand red) filled variant */
  .btn--primary {
    --btn-background: var(--color-primary);
    --btn-color: white;
    --btn-border: 1px solid var(--color-primary);

    &:hover {
      --btn-background: var(--color-primary-dark);
      --btn-border: 1px solid var(--color-primary-dark);
    }
  }

  /* Info blue filled variant — shared by search, jump, etc. */
  .btn--info {
    --btn-background: var(--color-info);
    --btn-color: white;
    --btn-border: 1px solid var(--color-info);

    &:hover {
      --btn-background: var(--color-info-dark);
      --btn-border: 1px solid var(--color-info-dark);
    }
  }

  /* Danger outline variant — destructive actions */
  .btn--danger-outline {
    --btn-background: transparent;
    --btn-color: var(--color-error);
    --btn-border: 1px solid var(--color-error);

    &:hover {
      --btn-background: var(--color-error);
      --btn-color: white;
    }
  }

  /* Info blue outline variant — nav links */
  .btn--info-outline {
    --btn-background: transparent;
    --btn-color: var(--color-info);
    --btn-border: 1px solid var(--color-info);

    &:hover {
      --btn-background: var(--color-info);
      --btn-color: white;
    }
  }

  /* Size: small */
  .btn--sm {
    --btn-padding-block: 0.3em;
    --btn-padding-inline: 0.75em;
    font-size: var(--text-small);
  }

  /* Jump-to-timecode: small info + monospace */
  .btn--jump {
    font-family: var(--font-mono);
    white-space: nowrap;
  }
}